Home  >  Article  >  Web Front-end  >  How to convert html characters to entities in javascript

How to convert html characters to entities in javascript

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-07-21 10:37:462436browse

方法:1、使用innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签);2、使用innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签)。

How to convert html characters to entities in javascript

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

针对这个问题,可以分为两种情况:一种是只包含&、f539a70d3ea090bac4faa80192f58ccc、'的html实体,另一种是广义的实体,不只局限于上面的情况。对于后者,在我看来,除了列举出所有的实体符号,写switch case语句,还真的没有什么好办法。(如果您有什么好办法,请不吝赐教。)。针对前者的话,其实原生js就支持。例如会自动对文本中存在的HTML语法字符(小于号、大于号、引号及和号)进行编码的节点的innerText属性(FireFox中是textContent属性。

实际上二者并不完全一样,innerText会忽略行内样式和脚本,而textContent则会原样返回行内样式和文本。)。其原理是设置innerText会生成当前节点的一个子文本节点,而为了确保只生成一个子文本节点,就需要对文本进行HTML编码。innerHTML虽然也可以做到,但它转变的只是标签的文本。下面的例子展示了它们的不同。

var div=document.createElement('div');
div.innerText=&#39;<p>hello & world</p>&#39;;
div.innerText //<p>hello & world</p>"
div.innerHTML //"&lt;p&gt;hello &amp; world&lt;/p&gt;"

div.innerHTML=&#39;<p>hello & < world</p>&#39;
div.innerHTML //"<p>hello &amp; &lt;  world</p>"
div.innerText //"hello & < world"

从上面例子中可以看到二者的区别:innerText会将所有的文本转义(当然也不是全部文本,比如空格就不会),innerHTML则是对标签內的文本进行转义,标签如e388a4556c0f65e1904146cc1a846bee就不会转义,但孤立的小于大于号还是会进行转换的。(上面代码中innerHTML之所以设置的内容和解析后的内容不一样,是因为返回的是浏览器根据原始字符串解析为DOM树后经过序列化之后的结果。)根据上面程序的结果,我们可以得到简单的转换函数:

//仅限于包含`&、<、>、&#39;`的文本转换
function stringToEntity(str){
  var div=document.createElement(&#39;div&#39;);
  div.innerText=str;
  div.textContent=str;
  var res=div.innerHTML;
  console.log(str,&#39;->&#39;,res);
  return res;
}

其实除了innerText,还可以通过创建文本节点的方式来完成转义,即使用document.createTextNode()。这种方法大部分的应用场景是对用户输入进行转义。例如业务需要,我们需要把用户的输入写到网页上,不做转义直接将用户输入写到网页上往往是行不通的,因为容易出现XSS漏洞。不过我们可以通过document.createTextNode()方法将用户输入作为文本节点,然后再插入到文档中。该方法会对出现的特殊标记进行转义。例如如下代码:

var str="<img src=&#39;a valid url&#39; οnlοad=&#39;alert(1)&#39;></img>";
var text=document.createTextNode(str);
$("container").appendChild(text);

上述代码中如果不加转义直接使用$("container").innerHTML=str;就会使得图片加载完运行onload里面的代码,如果代码是恶意的,就会为我们网站的用户造成损害。而将小于号、大于号转义后就不会出现这个问题了。

【推荐学习:javascript高级教程】  

The above is the detailed content of How to convert html characters to entities in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn