Write HTML within JavaScript - javascript

Can anyone help me to convert this to proper JavaScript?
<script>var datePostForAll = '<div class='date-header'><data:post.dateHeader/></div>';</script>
Thank you!
:*

It is proper JavaScript. It's the same as writing:
<script>
var datePostForAll = "<div class='date-header'><data:post.dateHeader/></div>";
</script>
They're used ' instead of an apostrophe so they don't have to escape ' and " marks inside the string. The <data:post.dateHeader/> is custom Blogger markup and will be evaluated when it is run. Because the contents of <data:post.dateHeader/> may include quote marks, they chose to wrap the string in ' to prevent accidentally introducing unescaped elements into the string. Regardless, as this will be outputting a date, wrapping it in quotes should be fine.

Related

Using user input inside JavaScript breaks code

I am using user input inside JavaScript. And of course to be safe my framework is changing some symbols to HTML codes. But for some reason that breaks my JavaScript. So for example this works:
<a onclick="alert('hello')">Hello</a>
But this doesn't:
<a onclick="alert('hel l' lo')">Hello</a>
Why doesn't the below work and how can I make it work?
' is HTML for '. The HTML is parsed and the result passed to the JavaScript compiler so your JavaScript is alert('hel ' lo') and you can't have an unescaped ' in a string literal delimited with ' characters.
Escaping data to make it safe to insert into HTML is not enough to make it safe to insert into JavaScript which is then inserted into HTML in turn.
Store the user input in a data-* attribute (which is plain HTML so you can use ' safely) and then read the attribute from your JavaScript.
You're inserting a character reference for a single quote '.
Even though you're using ', when it hits JavaScript, it's a quote mark. Therefore, you're ending the string literal and causing a syntax error.

How to display <a> tag from JavaScript in HTML by escaping characters

I have a variable in my JavaScript, where I need to pass an anchor tag and a URL to route. But I am getting errors in my JS file and it looks like I need to escape my HTML tags, but it didn't work.
Can some one help?
var link = "<a href="http://localhost:3002/#/login?customerid=" >Continue</a>;
I tried below but it didn't work:
<a href="http://localhost:3002/#/login?customerid=" >Continue</a>
var link = '<a href="http://localhost:3002/#/login?customerid=" >Continue</a>';
The error was because if you open a string with " you have to end it with " but your url inside href is quoted with " " so it obviously failed to make your string variable. I just quoted your string with ' and let the " for the href.
You need to rewrite the line as
var link = "<a href=\"http://localhost:3002/#/login?customerid=\" >Continue</a>";
The reason is because Javascript thinks that the string ends at the first ". To prevent this, the backwards slash specifically delineates this as part of the string
However, what are you using this for in the first place? Storing HTML in strings isn't recommended.

ENT_QUOTES in a JS string

I have this function :
function change_this(my_str)
{
$('#myDiv').html('<input value=\''+my_str+'\'>');
}
When I call this function with this :
onclick=change_this('Test '');
I see in the debugger that ' has been turned to a quote, and therefore the script does not work.
So my question is: how can I send a quote inside a string to a JS function?
I'm sure I'm not the first person to face this issue, I googled but did not find any simple explanations / answers.
You have two problems. This is because you have HTML embedded in JavaScript embedded in HTML which you are then generating HTML from by mashing together strings of JavaScript. You switch languages so many often it makes my head spin.
Problem 1: Getting the right string into the function
To include a single quote inside a string delimited by single quotes in JavaScript, you must escape them with a \.
onclick="change_this('Test \'');"
There is no need to use character references here. There are no ' with special meaning in the HTML. You would need to use ' three times if you had used ' instead of " to delimit the attribute value.
I'd avoid onclick entirely and favour data- attributes and JS event binding.
<input type="button" data-foo="Test '">
$("[type=button]").on('click', function (event) {
change_this( $(this).data('foo') );
});
Problem 2: Getting the right string into the HTML attribute value.
With the approach you are taking, you would need to convert the ' to '. Note that you would have to do it programatically because if you had it in the onclick attribute then it would be converted to ' by the HTML parser before the JavaScript engine even saw it.
Don't use your current approach though. Mashing strings together to make HTML is a nightmare.
Use DOM or something jQuery that vaguely resembles DOM.
var input = $("<input />").val(my_str);
$('#myDiv').empty().append(input);

no need to escape innerHTML characters in javascript?

Should I not escape the double quotes in "markup4" and such? To my surprize this plain works. If I replace them by the &quot thing it doesn't.
<script type="text/javascript">
function test3(){
document.getElementById('div21').innerHTML += '<div class = "markup4"><br>blablablabla1.<br><br></div><div class = "markup3"><br>blablabla2.<br><br></div>';
}
</script>
These work without escape:
innerHTML = "<div class = 'markup4'>";
innerHTML = '<div class = "markup4">';
Note: When the " used outside, the ' works properly inside. (and
the opposite)
These need the escape:
innerHTML = '<div class = \'markup4\'>';
innerHTML = "<div class = \"markup4\">";
Note: When you use the double quote outside and inside, the inside's
" needs to be escaped by \. (same for single quotes)
These will break:
innerHTML = "<div class = "markup4">";
innerHTML = '<div class = 'markup4'>';
escape should be used when you want to include quotes within the data,
ex: He said, "Please use this!" should get escaped like:
He said, \" Please use this !\".
Otherwise they work without any troubles.
Hope I've clarified.
First the string is parsed to an internal javascript string representation, so you first need to escape for javascript string literals. The result of this would be the same as what you already have - so no modification is needed.
Now you have
<div class = "markup4"><br>blablablabla1.<br><br></div><div class = "markup3"><br>blablabla2.<br><br></div>
Internally in javascript memory.
After this, it's just like you would write that as normal HTML, so of course, if you use " it will not work.
It can get pretty complicated to store strings that go through 2 different interpretations, which is why you shouldn't do this but use templating engines with the templates stored in other files or custom script elements on the page, which would allow you to focus only on the html interpretation.
Don't forget browsers render their own innerHtml based on what you give them which can cause problems if nesting innerHtml code.
I found the &apos; and " codes useful here.

Replace Single Quotes in Javascript or JQuery

i have an Html String in which i have some elements having single quotes.When i put this inside a $('varHtml'); Since the varHtml already contains some single quotes it qives an error, Can Somebody help me how to Escape the single quotes in the varHtml
Thanks in Advance
Thomson
If you have a HTML string in a variable, then you don't need to put it in quotes:
var varHtml = "<div id='foo'></div>";
$(varHtml);
javascript lacks something like an htmlencode to run client side. So you will have to use one of the script libraries. You can try this jQuery solution:
http://www.edentity.ca/WhoWeAre/Blog/Easy-Client-Side-html-EncodeDecode-using-jQuery.aspx
Or you could simply use a javascript string replace function like the one explained here: http://www.w3schools.com/jsref/jsref_replace.asp. Replace ' with ' or the HTML code you prefer. Reference: http://www.degraeve.com/reference/specialcharacters.php

Categories