Escape "<" and ">" as part of element attribute value in IE - javascript

I want to escape ">" and "<" inside an element attribute and unfortunately I could not figure it out.
It looks that by default in IE outerHTML is escaping ampersand character and once I try to escape ">" (replace ">" with "amp+gt;") the ampersand that is part of "amp+gt;" is escaped again.
Here is a sample code:
var div = '<div atr="test & and < and >"></div>';
var $el = $(div);
console.log("txt string: " + div);
console.log("$el outerHTML BEFORE escaping: " + $el[0].outerHTML);
var rgx = new RegExp(">", "g");
$el.attr("atr", $el.attr("atr").replace(rgx, ">"));
console.log("$el outerHTML AFTER escaping: " + $el[0].outerHTML);
This is the output from this code:
txt string: <div atr="test & and < and >"></div>
$el outerHTML BEFORE escaping: <div atr="test & and < and >"></div>
$el outerHTML AFTER escaping: <div atr="test & and < and &gt;"></div>
As one can see ampersand that is part of greater then escaped is escaped again.
Basically what I need to have is:
<div atr="test & and < and >"></div>
Would you please let me know what might be missing here and how to fix this?
Thank you.

Just use the .attr method to set the attribute and the contents will be escaped automatically:
> $('<div>').attr('foo', '<>')[0].outerHTML
"<div foo="<>"></div>"
NB: this is one of the reasons why it's good to use jQuery methods to modify elements instead of string concatenation.

Related

try to show html tags as text with innerHTML

I have a string that contains HTML tags.
I want to render as an HTML element only the span tags aka <span></span>.
every other tag that is not a span tag should be treated as regular text.
The result I'm trying to achieve is to color any text that I want even if it contains HTML tags.
I fail.
is there any other technique that I can try or a workaround?
var problem = ["<h1>","</h1>"];
var red_text = "<span style='color:red'>i am red </span>";
var green_text = "<span style='color:green'>" +
problem[0] +
"i am green" +
problem[1] +
"</span>";
//the real result should have <h1> </h1>
var expected_text = red_text + "<span style='color:green'>|h1|i am green|/h1|</span>";
document.getElementById("demo").innerHTML = red_text + green_text;
document.getElementById("expected").innerHTML = expected_text;
HTML and JavaScript code at :
https://jsfiddle.net/ytLftxww/1/
You need to use HTML entities to escape the < and > in those tags.
For example: "<span style='color:green'><h1>i am green</h1></span>"
See the fiddle: https://jsfiddle.net/ytLftxww/1/
var problem = ["<h1>","<h1>"];
does unescaping the < > work for you?
updated fiddle
You can use &lt for < and & &gt for >.

Href how to pass dynamic data

[![enter image description here][1]][1]In href how to pass path with dynamic data, below I'm giving my code:
var abc = response[i].DocumentName;
var photoName = "<a href='#Url.Content("~/UploadImage/")" + abc +'" target="_blank" >'+response[i].DocumentName+'</a>';
in debugger mode i am getting like this:-
photoName = "jpeg2_10514.jpg"
which is not working for me
Try this:
var photoName = "" + response[i].DocumentName + "";
In Javascript you have to escape doublequotes " with a backslash \ if you want them to appear in the string.
The backslash in + abc + "\" is there to escape the second " to enclose the href in doublequotes.
EDIT
I added the missing doublequote befor the anchor tag according to the tip of karan.

How to escape single or double quote in JavaScript?

I am trying to replace quote (') with \' so as to escape escape quote or double quote in string
<ul id="list">
</ul>
<button id="sethrefbtn" onclick="setlink();">Set Link</button>
function setlink(){
var data = {
playerID : 102458,
playername: "Real Madrid's cristiano Ronalado"
}
listring= "<li><a href='SearchServlet?q=" + data.playername.replace(/'/g, "\'"); + "&playerid=" + data.playerID + "&page=1#pg0'>"+ data.playername +"</a></li>";
$("#list").append(listring);
}
Here is fiddle: fiddle
The desired output should be:
Real Madrid's cristiano Ronalado
Your problem is being caused by it being in an HTML attribute (so you need to convert it to an HTML character reference and not escape it). You should deal with that by using DOM instead of string mashing to build your HTML.
However, in this particular case, you are putting it in a URL, so you should be escaping it for URLs first.
You can do that with encodeURIComponent, but since you are building an entire query string and are using jQuery, you can use param instead.
function setlink() {
var data = {
playerid: 102458,
q: "Real Madrid's cristiano Ronalado",
page: 1
}
var url = "SearchServlet?" + $.param(data);
var li = $("<li />").append(
$("<a />").text(data.q).attr('href', url)
);
$("#list").append(li);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
</ul>
<button id="sethrefbtn" onclick="setlink();">Set Link</button>
listring= "<li><a href='SearchServlet?q=" + data.playername.replace(/'/g, "\'") + "&playerid=" + data.playerID + "&page=1#pg0'>"+ data.playername +"</a></li>";
Just replace the above statement in the code .
There is a semicolon in the middle of the statement in your code.

Adding HTML code with Single Quotes inside jQuery

I am trying to add this HTML/JavaScript code into a jQuery variable. I've managed to insert double quotes by writing is with a backshlash \", however the same tactic didn't work for the single quotes:
ajaxData += '<div class=\"menu-item-' + $(this).attr('div') + 'onclick=\"alert('Jquery Function');\"></div>';
Specifically, this part onclick=\"alert('Jquery Function');
Anyone know how I can go around this?
See this, its beautiful:
ajaxData += '<div class="menu-item-' + $(this).attr('div') + ' onclick="alert(\'Jquery Function\');"></div>';
Dirty escape pheeww...Try this
ajaxData += '<div class="menu-item-' + $(this).attr('div') + 'onclick="alert(\'Jquery Function\');"></div>';
ajaxData += '<div class="menu-item-' + $(this).attr('div') + 'onclick="alert('Jquery Function');"></div>';
add escape \ for single quotes. if your string is within single quotes then you can use double quotes without escape but if using single quotes within single quote then you have to insert escape character
This is are you trying to do?
$var = "ajaxData += '<div class=\"menu-item-' + \$(this).attr('div') + '" onclick=\"alert(\'Jquery Function\');\"></div>';"

JavaScript regex replace inner quotes

I'm trying to fix an inline javascript snippet with reg ex to be rewritten on an input field.
I have single quotes that wrap the inner double quotes and I want to convert the inner quotes to be single instead of double but I only want to convert them when the code appears as nested quotes.
Right now I'm doing the conversion for all instances of the quote which works but I might run into another problem. I'll attach my code below.
JavaScript
$(document).ready(function() {
$('.submit').bind('click', function(e) {
var yourstring = $("textarea").val();
yourstring = yourstring.replace(/'/g, "''");
yourstring = yourstring.replace(/&quote;/g, "\"");
yourstring = yourstring.replace(/&lquote;/g, "\"");
yourstring = yourstring.replace(/&rquote;/g, "\"");
yourstring = yourstring.replace(/&#34/g, "\"");
yourstring = yourstring.replace(/“/g, "\"");
yourstring = yourstring.replace(/”/g, "\"");
yourstring = yourstring.replace(/"/g, "\"");
alert(yourstring)
});
});​
HTML
<textarea style="width:400px;height:300px;">
function('');
<a onclick="$(".text").append('test');">Click Me</a>
<br/>
&lquote;test quotes&rquote;
" generic quotes "
</textarea>
<input type="submit" class="submit">
To be more specific I'm trying to get
<a onclick="$(".text").append('test');">Click Me</a>
To look like
<a onclick="$('.text').append('test');">Click Me</a>
The example provided does not seem to have anything to do with the database but a problem with the JavaScript code within the onclick attribute. That code actually doesn't have a valid syntax, but my guess is that you are trying to build some sort of editor for HTML code.
If you decide not to follow the recommendations in the comments above (which I agree with), to answer your question, here's an option for removing double quotes for text already surrounded by them:
var s = "<a onclick=\"$(\".text\").append('test');\">Click Me</a>";
var re = /"(.*)"/g;
var r = s.replace(re, function($0, $1) { return '"' + $1.replace(/"/g, "''") + '"'; });
console.log(r);
​

Categories