I'm trying to display the character count of various divs I have on a page.
I have this:
<div class="myText">Here is some text.</div>
<div class="myText">Here is some more text.</div>
I'd like to display the character count after each one. So the page would look like this:
Here is some text. 18
Here is some more text. 23
I know I can use jQuery:
$('.myText').text().length
combined with
document.write
but I have no idea how (I'm just starting to learn javascript). Also, the divs are generated by our CMS so there are going to be a lot of them and I'd like to get character counts for them all so maybe they each need different class names?
Any help would be appreciated.
$('.myText').each(function() {
var $this = $(this);
$this.append($this.html().length);
});
Related
I am getting what I am assuming is json data from a wordpress blog endpoint like so:
https://example.com/wp-json/wp/v2/posts
I am looping through and showing the tiles for now:
<div>{posts && posts.map((post) => <h1>{post.title.rendered}</h1>)}</div>
But the post titles are not displaying properly. For example the word Don't shows Don’t
I have discovered that I can use dangerouslySetInnerHTML to fix this issue but is it safe? The fact that it has the word 'dangerously' in it is worrying.
I believe dangerouslySetInnerHTML is the way to go about this - but I will go into more detail as to why "dangerously" is in "dangerouslySetInnerHTML" and hopefully that will help you make an informed decision for your situation.
What dangerouslySetInnerHTML does is render any HTML string given to it within the DOM element.
For example:
<h1 dangerouslySetInnerHTML={{__html: post.title.rendered}} />
(as an aside, note the __html key has two underscores)
Will properly render the string Don’t to Don't.
This is all pretty harmless, however, if, for example, the value of post.title.rendered could be set by an untrusted party (such as an arbitrary user), and if this arbitrary user wanted to do some damage, they could enter a string such as:
<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>
This code would then be executed by the browser when the page loads - because React would have generated the following DOM:
<h1>
<script type="text/javascript>
// Do evil stuff
console.log('I did some evil stuff');
</script>
</h1>
So with all that in mind, if you are sure that the value of this field is within your control (and not anyone else's) and you also know that there will not be any arbitrary code in these strings, then go ahead and use dangerouslySetInnerHTML.
However, if there is the possibility that someone besides yourself could manipulate this field, I would instead look to something like decode-html-entities - this way you can have the presentation you want, without compromising your app/users.
Is there a way to send a print command to my printer for printing a tabular data in react js. Sorry if the question sounds silly because I am new to this. Thanks in advance.
Call window.print() function.
print(){
window.print();
}
call this function when you want to print your current screen or component
Triggering the browser's native print behavior is quite simple: just call a window.print() in your code.
Then your page will be printed as it is, so commonly you should provide a CSS spefic for the print media.
You have two way:
add a separate CSS like <link rel="stylesheet" href="css/style.css"/>
include a #media print in your existing CSS:
#media print {
…
}
What you should put inside your CSS? Whatever you need to fix your styles, commonly a lot of display: none rules to hide elements you don't want to print.
Final thoughts:
print from HTML is not much cross-browser: some browsers print better than other
printing HTML tables is full of caveats, for example take a look at: Repeat table headers in print mode
I am working on an AngularJs project and I am using the translate filter the following way:
<h2>{{'This is my text' | translate}}</h2>
It works fine, but I would like to be able to use variables in my translations. Here is what I have tried:
In the controller:
vm.text = "This {{toReplace}} is a variable.";
vm.myVariable = "random value";
In the html:
<h2>{{vm.text | translate:'{ toReplace: vm.myVariable }'}}</h2>
It doesn't replace {{toReplace}} with the content of myVariable. Instead, the page displays "This {{toReplace}} is a variable."
What should I do to make this work ?
Have you tried with the directive rather than the filter ? Something like this :
<h2 translate="vm.text" translate-values={'toReplace':vm.myVariable}"></h2>
vm.text must contain a valid translate key, which you should define in your language files. The value of the translate key will be "This {{toReplace}} is a variable.". Then your HTML should render correctly.
If you just want to render this text without internationalization support, you could just do this:
<h2>This {{vm.toReplace}} is a variable.</h2>
Here is the solution that has worked for me, considering 'myVariable' is a variable defined in my controller:
<h2 data-translate>This {{vm.myVariable}} is a variable</h2>
The tricky part is that, just like when using the translate filter, the text in the element is not the text being displayed, but the ID of the element to translate. In the translation files (po), you will have to have an element with the ID 'This {{vm.myVariable}} is a variable', including the name of the variable. If you need to display the same text but with data coming from a different variable, you would have to declare a different translation with its own ID, even though only the variable part of the text is different.
For exemple, this would have to be a different entry in the translation files:
<h2 data-translate>This {{vm.myVariable2}} is a variable</h2>
I have some special characters to show in various screens of my application so i wanted to have some way where i can handle special characters like "special char - æ &" in controller/service instead of HTML.
I know i can use
ng-bind-html
to show special characters for the example string above. However i need to show same string in multiple screens so it would make more sense for me to do it in JS. Any alternative or equivalent JS side snippet for ng-bind-html?
Note: If you have come across these kind of strings you might be knowing that they can be rendered directly with HTML but if you are using Angular JS with
{{some scope value}}
then it doesn't format special characters on it's own.
You can use $sce like so:
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('HTML_CODE;');
}
And then in your HTML you use ng-bind-html to bind the content to an element.
<span ng-bind-html="html"></span>
I want to display special spanish characters like á,Á,ã,Ã in combobox.SO, I wrote the code for it in locale file, Inglés and Español,etc. When I open the dropdown, it displays the word correctly but when I select it, it displays the code in the box. Similar thing happens with boxLabels, it shows the code instead of the special character. Can anyone suggest me a solution for it?
Thank you.
The problem occurs because elements on list are rendered as divs (so html entities works) while value box is rendered as input (entities dosen't work). Easiest way is to display national characters is to replace entities with actual unicode chars. You can do that by overriding setRawValue method:
Ext.define('Ext.ux.form.ComboBox', {
extend: 'Ext.form.ComboBox',
setRawValue: function(value) {
this.callParent([ decodeEntities(value) ]);
}
});
Fiddle: http://jsfiddle.net/9mjbf96o/2/