欧美亚洲中文,在线国自产视频,欧洲一区在线观看视频,亚洲综合中文字幕在线观看

      1. <dfn id="rfwes"></dfn>
          <object id="rfwes"></object>
        1. 站長資訊網(wǎng)
          最全最豐富的資訊網(wǎng)站

          javascript如何實現(xiàn)html字符轉(zhuǎn)實體

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

          javascript如何實現(xiàn)html字符轉(zhuǎn)實體

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

          針對這個問題,可以分為兩種情況:一種是只包含&、<、>、'的html實體,另一種是廣義的實體,不只局限于上面的情況。對于后者,在我看來,除了列舉出所有的實體符號,寫switch case語句,還真的沒有什么好辦法。(如果您有什么好辦法,請不吝賜教。)。針對前者的話,其實原生js就支持。例如會自動對文本中存在的HTML語法字符(小于號、大于號、引號及和號)進(jìn)行編碼的節(jié)點的innerText屬性(FireFox中是textContent屬性。

          實際上二者并不完全一樣,innerText會忽略行內(nèi)樣式和腳本,而textContent則會原樣返回行內(nèi)樣式和文本。)。其原理是設(shè)置innerText會生成當(dāng)前節(jié)點的一個子文本節(jié)點,而為了確保只生成一個子文本節(jié)點,就需要對文本進(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會將所有的文本轉(zhuǎn)義(當(dāng)然也不是全部文本,比如空格就不會),innerHTML則是對標(biāo)簽內(nèi)的文本進(jìn)行轉(zhuǎn)義,標(biāo)簽如<p>就不會轉(zhuǎn)義,但孤立的小于大于號還是會進(jìn)行轉(zhuǎn)換的。(上面代碼中innerHTML之所以設(shè)置的內(nèi)容和解析后的內(nèi)容不一樣,是因為返回的是瀏覽器根據(jù)原始字符串解析為DOM樹后經(jīng)過序列化之后的結(jié)果。)根據(jù)上面程序的結(jié)果,我們可以得到簡單的轉(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; }

          其實除了innerText,還可以通過創(chuàng)建文本節(jié)點的方式來完成轉(zhuǎn)義,即使用document.createTextNode()。這種方法大部分的應(yīng)用場景是對用戶輸入進(jìn)行轉(zhuǎn)義。例如業(yè)務(wù)需要,我們需要把用戶的輸入寫到網(wǎng)頁上,不做轉(zhuǎn)義直接將用戶輸入寫到網(wǎng)頁上往往是行不通的,因為容易出現(xiàn)XSS漏洞。不過我們可以通過document.createTextNode()方法將用戶輸入作為文本節(jié)點,然后再插入到文檔中。該方法會對出現(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;就會使得圖片加載完運行onload里面的代碼,如果代碼是惡意的,就會為我們網(wǎng)站的用戶造成損害。而將小于號、大于號轉(zhuǎn)義后就不會出現(xiàn)這個問題了。

          【推薦學(xué)習(xí):javascript高級教程】

          贊(0)
          分享到: 更多 (0)
          網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號