Escaping < and > in JavaScript code when assigning it to InnerHtml

Question

I am adding some javascript code to a script tag programmatically by assigning it to InnerHtml property of the HtmlNode

scriptNode.InnerHtml =new_script;

and my javascript contains less than < and/or greater than > characters and that causes problems - distorts my resulting javascript. How can I escape those.

Here is a sample javascript that is causing the problem:

function myFunc(el){
    var i=0
    for (;i < el.choice.length;i++){
        ....
    }
}

How can I escape the < in the code above while assigning the code as InnerHtml for my Html node?

Possible duplicate of [Fastest method to escape HTML tags as HTML entities?](http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities) — GolezTrol, May 12 '16 at 17:28
No, that does nto work for me. I am dealing with actual javascript code that gets edited when assigned to innerHtml — Coding Duchess, May 12 '16 at 18:41

AndrewL64 · Accepted Answer · 2016-05-12T22:03:47.143

2

You can either use HTML codes of > and < which are < and >

OR

You can wrap your script within CDATA like this:

<script>
    <![CDATA[
        --YOUR SCRIPT--
    ]]>
</script>

edited May 12 '16 at 22:03

answered May 12 '16 at 17:29

AndrewL64

15,794
8
47
79

It would be nice if an explanation is given for the downvote. If it's a valid reason, I will even delete the answer to prevent further confusion. Cheers – AndrewL64 May 12 '16 at 17:31
let me try, I think it might work for me. Keeping my fingers crossed – Coding Duchess May 12 '16 at 18:33
it worked! I still hsve to figure out if there are downsides to using CDATA but other than that it worked! Thanks! – Coding Duchess May 12 '16 at 18:41
Glad I could help Elena :) Cheers – AndrewL64 May 12 '16 at 19:16
CDATA would break if the script contained `]]>`. – Imre Pühvel Jun 19 '19 at 10:13

score 2 · Answer 2 · edited May 23 '17 at 10:29

For that you need to encode and decode the javascript content. please refer the following code :

function htmlEncode(value){
  //create a in-memory div, set it's inner text(which jQuery automatically encodes)
  //then grab the encoded contents back out.  The div never exists on the page.
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

htmlEncode('<b>test</b>')
// result"&lt;b&gt;test&lt;/b&gt;"

As posted previously by @CMS

score 0 · Answer 3 · answered May 12 '16 at 17:25

0

Here is a simple code that escapes a string:

function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

answered May 12 '16 at 17:25

Nick Messing

494
5
14

These aren't the only special characters though – Lucas Mumbo Mar 06 '22 at 04:31

Escaping < and > in JavaScript code when assigning it to InnerHtml

3 Answers3