答案写在最前面(demo):
function translateHtmlCharater(html) { var div = document.createElement("div"); div.innerHTML = html; return div.textContent; }
然后在需要转换的地方调用这个方法 translateHtmlCharater(html) 生成即可,原因是 js 无法渲染 html 字符(熟悉 tpl2js 的人,应该都知道那些特殊字符 js 会以 unicode 的方式处理)。
首先,这不是一个 bug,这不是一个 bug,这真的不是一个bug。顺便说说解决问题的过程,以及对于巩固基础的一点想法。
刚写 react 不久,公司业务后台生成的商品名当中有一些html 实体字符,会出现字符被直接以字符的形式渲染出来而不是字符结果,例如 & amp; 不会渲染成&。于是我在网络上搜索了 “react 渲染 html 字符 ” ,然后发现react 官方给了方案(因为要防止 xss 注入)。然后使用 dangerouslySetInnerHTML 的方式解决了名称的问题点这里看,但是有出现了这样的问题(把光标凡在第二排,title 会显示出来,并且显示是错的)。
这种方式一方面不优雅,另一方面没有完全解决问题。然后我在技术群里求助(很多人出现了这个问题,但大都是以 dangerouslySetInnerHTML 或者干脆不解决)。开始搜索“渲染 html 字符”看了几个,发现网上的处理并不优雅,甚至有人拿正则来替换(也是醉)。各方求助之后,有人问我你这个是 html 实体字符啊,js 怎么可能渲染。于是这个时候出现转机,出现了文章一开头的解决办法。什么问题都给到了解决。
列几点,对自己的期望,也希望能帮助看这篇文章的人: