Question

我正在尝试将注释文本分配给一个元素，该元素应该包含一些html。因此，我想在提交后在页面上显示评论文本之前对其进行编码。我尝试了以下过程，但它没有编码html。我希望将html转换为文字。

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

修改

1）commenttext是一个变量。

2）通过文字我的意思是编码html ...＆amp; lt .. etc

Answer 1

假设您有jQuery，请查看此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();
}

然后您将在代码中使用该方法，如

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

如果您不想使用jQuery，请查看此answer。

Answer 2

以下代码只是替换< with < and > with >。这适用于简单的情况，但一个人应该真正逃脱角色＆amp; “和'以及。

<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>

Answer 3

阅读innerTXT和innerHTML之间的区别，它们是不一样的！ innerText 属性设置或返回指定节点及其所有后代的文本内容。

innerHTML属性设置或返回元素的HTML内容（内部HTML）。

innerText属性不对html进行编码

3 个答案: