innerText property is not encoding the html

Question

I am trying to assign the comment text to an element, which is supposed to contain some html. So I am trying to encode the comment text before displaying it on the page after submitting. I have tried the following procedure but its not encoding the html. I want the html to be converted to literals.

                var span=document.createElement("span");
                span.innerText=commenttext;
                console.log(span.innerText);

Edit

1) commenttext is a variable.

2) by literals I mean encoded html... &lt.. etc

I think I misunderstood this one, what exactly does *"converted to literals"* mean ? — adeneo, May 24 '15 at 18:34
I think he means escaping. In which case look here http://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript — antron, May 24 '15 at 18:35
So what you want is ***HTML entities***? Javascript doesn't really have a entity encode function, as it's generally not something you'd need on the clientside. — adeneo, May 24 '15 at 18:42
The description of `innerText` say that it does the encoding automatically and displays html as literals According MSDN `If you attempt to assign HTML to an element with InnerText, the HTML code will display as literals in the document` — whatever, May 24 '15 at 18:42
Well, literals, as in literal text, not being parsed as HTML. It does **not** mean HTML entities — adeneo, May 24 '15 at 18:42
So your string contains `<` and you want to display it as `<`? Or the opposite? — Oriol, May 24 '15 at 18:44

score 2 · Accepted Answer · edited May 23 '17 at 12:14

2

Assuming you have jQuery take a look at this answer:

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();
}

And you would then use that method in your code like

var span=document.createElement("span");
span.innerText=htmlEncode(innerText);
console.log(span.innerText);

Alternatively take a look at this answer if you don't want to use jQuery.

edited May 23 '17 at 12:14

Community

1
1

answered May 24 '15 at 18:45

Stefan Ch

329
2
7

hurray.. hhh.. I once read this question then I closed the window.. later I searched and searched and searched but could not find it again.. hhh – whatever May 24 '15 at 18:46
So does it take care of your problem then? – Stefan Ch May 24 '15 at 18:49

Yogi · Answer 2 · 2015-05-24T19:03:52.417

The code below simply replaces < with < and > with >. This works for simple cases, but one should really escape characters & " and ' as well.

<html>
<body>

<div id="output">out</div>
  
<script type="text/javascript">

  var commenttext = '<ul><li style="color:red;">This is a comment</ul>';

  var span=document.createElement("span");

  span.innerHTML=commenttext;

  // displays: This is a comment
  console.log( 'console: ' + span.textContent );
  
  //displays: "<ul><li style="color:red;">This is a comment</li></ul>"
  console.log( span.innerHTML ); 

  //displays: "<ul><li style="color:red;">This is a comment</li></ul>"
  document.getElementById('output').innerHTML = span.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;');
  

</script>
</body>
</html>

score 1 · Answer 3 · answered May 01 '20 at 09:30

read the differences between innerTXT and innerHTML, they are not the same! The innerText property sets or returns the text content of the specified node, and all its descendants.

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

innerText property is not encoding the html

3 Answers3

Linked