innerText属性没有编码html

innerText property is not encoding the html

本文关键字：编码 html 属性 innerText      更新时间：2023-09-26

我试图将评论文本分配给一个元素，该元素应该包含一些html。所以我试图在提交后在页面上显示评论文本之前对其进行编码。我已经尝试了以下过程，但它不是编码html。我希望将html转换为文字。

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

编辑

1) commenttext是一个变量。

2)我的字面意思是编码的html…, lt . .等

假设你有jQuery，看看这个答案:

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，也可以看看这个答案

下面的代码只是替换< with &lt; and > with &gt;。这适用于简单的情况，但应该真正转义字符&

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

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

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

相关文章：