javascript怎么實(shí)現(xiàn)html字符轉(zhuǎn)實(shí)體

這篇文章主要介紹“javascript怎么實(shí)現(xiàn)html字符轉(zhuǎn)實(shí)體”，在日常操作中，相信很多人在javascript怎么實(shí)現(xiàn)html字符轉(zhuǎn)實(shí)體問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”javascript怎么實(shí)現(xiàn)html字符轉(zhuǎn)實(shí)體”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

方法：1、使用innerHTML設(shè)置或獲取標(biāo)簽所包含的HTML+文本信息(從標(biāo)簽起始位置到終止位置全部?jī)?nèi)容，包括HTML標(biāo)簽)；2、使用innerText設(shè)置或獲取標(biāo)簽所包含的文本信息（從標(biāo)簽起始位置到終止位置的內(nèi)容，去除HTML標(biāo)簽）。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

針對(duì)這個(gè)問(wèn)題，可以分為兩種情況：一種是只包含&、<、>、'的html實(shí)體，另一種是廣義的實(shí)體，不只局限于上面的情況。對(duì)于后者，在我看來(lái)，除了列舉出所有的實(shí)體符號(hào)，寫(xiě)switch case語(yǔ)句，還真的沒(méi)有什么好辦法。（如果您有什么好辦法，請(qǐng)不吝賜教。）。針對(duì)前者的話(huà)，其實(shí)原生js就支持。例如會(huì)自動(dòng)對(duì)文本中存在的HTML語(yǔ)法字符（小于號(hào)、大于號(hào)、引號(hào)及和號(hào)）進(jìn)行編碼的節(jié)點(diǎn)的innerText屬性（FireFox中是textContent屬性。

實(shí)際上二者并不完全一樣，innerText會(huì)忽略行內(nèi)樣式和腳本，而textContent則會(huì)原樣返回行內(nèi)樣式和文本。）。其原理是設(shè)置innerText會(huì)生成當(dāng)前節(jié)點(diǎn)的一個(gè)子文本節(jié)點(diǎn)，而為了確保只生成一個(gè)子文本節(jié)點(diǎn)，就需要對(duì)文本進(jìn)行HTML編碼。innerHTML雖然也可以做到，但它轉(zhuǎn)變的只是標(biāo)簽的文本。下面的例子展示了它們的不同。

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

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

從上面例子中可以看到二者的區(qū)別：innerText會(huì)將所有的文本轉(zhuǎn)義（當(dāng)然也不是全部文本，比如空格就不會(huì)），innerHTML則是對(duì)標(biāo)簽內(nèi)的文本進(jìn)行轉(zhuǎn)義，標(biāo)簽如<p>就不會(huì)轉(zhuǎn)義，但孤立的小于大于號(hào)還是會(huì)進(jìn)行轉(zhuǎn)換的。（上面代碼中innerHTML之所以設(shè)置的內(nèi)容和解析后的內(nèi)容不一樣，是因?yàn)榉祷氐氖菫g覽器根據(jù)原始字符串解析為DOM樹(shù)后經(jīng)過(guò)序列化之后的結(jié)果。）根據(jù)上面程序的結(jié)果，我們可以得到簡(jiǎn)單的轉(zhuǎn)換函數(shù)：

//僅限于包含`&、<、>、'`的文本轉(zhuǎn)換
function stringToEntity(str){
  var div=document.createElement('div');
  div.innerText=str;
  div.textContent=str;
  var res=div.innerHTML;
  console.log(str,'->',res);
  return res;
}

其實(shí)除了innerText，還可以通過(guò)創(chuàng)建文本節(jié)點(diǎn)的方式來(lái)完成轉(zhuǎn)義，即使用document.createTextNode()。這種方法大部分的應(yīng)用場(chǎng)景是對(duì)用戶(hù)輸入進(jìn)行轉(zhuǎn)義。例如業(yè)務(wù)需要，我們需要把用戶(hù)的輸入寫(xiě)到網(wǎng)頁(yè)上，不做轉(zhuǎn)義直接將用戶(hù)輸入寫(xiě)到網(wǎng)頁(yè)上往往是行不通的，因?yàn)槿菀壮霈F(xiàn)XSS漏洞。不過(guò)我們可以通過(guò)document.createTextNode()方法將用戶(hù)輸入作為文本節(jié)點(diǎn)，然后再插入到文檔中。該方法會(huì)對(duì)出現(xiàn)的特殊標(biāo)記進(jìn)行轉(zhuǎn)義。例如如下代碼：

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

上述代碼中如果不加轉(zhuǎn)義直接使用$("container").innerHTML=str;就會(huì)使得圖片加載完運(yùn)行onload里面的代碼，如果代碼是惡意的，就會(huì)為我們網(wǎng)站的用戶(hù)造成損害。而將小于號(hào)、大于號(hào)轉(zhuǎn)義后就不會(huì)出現(xiàn)這個(gè)問(wèn)題了。

到此，關(guān)于“javascript怎么實(shí)現(xiàn)html字符轉(zhuǎn)實(shí)體”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！