欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)HTML標簽轉(zhuǎn)義及反轉(zhuǎn)義

 更新時間：2020年04月14日 18:27:40   作者：wangyuheng77  
本文主要介紹了JS實現(xiàn)HTML標簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價值，下面跟著小編一起來看下吧

簡單說一下業(yè)務(wù)場景，前臺用戶通過input輸入內(nèi)容，在離開焦點時，將內(nèi)容在div中顯示。

這時遇到一個問題，如果用戶輸入了html標簽，則在div顯示中，標簽被解析。

由于是純前端操作，不涉及后端，因此需要通過js對輸入內(nèi)容進行轉(zhuǎn)義。

這里提供一個非常簡單有效的轉(zhuǎn)義方案，利用了innerHTML和innerText

注：火狐不支持innerText，需要使用 textContent 屬性，而IE早期版本不支持此屬性，為了同時兼容IE及火狐，需要進行判斷操作.

因為innerText（textContent）會獲取純文本內(nèi)容，忽略html節(jié)點標簽，而innerHTML會顯示標簽內(nèi)容，

所以我們先將需轉(zhuǎn)義的內(nèi)容賦值給innerText（textContent），再獲取它的innerHTML屬性，這時獲取到的就是轉(zhuǎn)義后文本內(nèi)容。

代碼如下：

function HTMLEncode(html) {
 var temp = document.createElement("div");
 (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
 var output = temp.innerHTML;
 temp = null;
 return output;
}
var tagText = "<p><b>123&456</b></p>";
console.log(HTMLEncode(tagText));//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;

通過測試結(jié)果，可以看到html標簽及&符都被轉(zhuǎn)義后保存。

同理，反轉(zhuǎn)義的方法為先將轉(zhuǎn)義文本賦值給innerHTML，然后通過innerText（textContent）獲取轉(zhuǎn)義前的文本內(nèi)容

function HTMLDecode(text) { 
 var temp = document.createElement("div"); 
 temp.innerHTML = text; 
 var output = temp.innerText || temp.textContent; 
 temp = null; 
 return output; 
} 
var tagText = "<p><b>123&456</b></p>";
var encodeText = HTMLEncode(tagText);
console.log(encodeText);//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>

編碼反編碼核心函數(shù)

 function html_encode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&/g, "&amp;"); 
    s = s.replace(/</g, "&lt;"); 
    s = s.replace(/>/g, "&gt;"); 
    s = s.replace(/ /g, "&nbsp;"); 
    s = s.replace(/\'/g, "&#39;"); 
    s = s.replace(/\"/g, "&quot;"); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&amp;/g, "&"); 
    s = s.replace(/&lt;/g, "<"); 
    s = s.replace(/&gt;/g, ">"); 
    s = s.replace(/&nbsp;/g, " "); 
    s = s.replace(/&#39;/g, "\'"); 
    s = s.replace(/&quot;/g, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
 
 
  console.log(html_decode('&lt;div&gt;123&lt;/div&gt;')); 
  console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')));

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 function html_encode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&/g, "&amp;"); 
    s = s.replace(/</g, "&lt;"); 
    s = s.replace(/>/g, "&gt;"); 
    s = s.replace(/ /g, "&nbsp;"); 
    s = s.replace(/\'/g, "&#39;"); 
    s = s.replace(/\"/g, "&quot;"); 
      s = s.replace(/\n/g, "<br/>"); 
    return s; 
  } 
 
  function html_decode(str) 
  { 
    var s = ""; 
    if (str.length == 0) return ""; 
    s = str.replace(/&amp;/g, "&"); 
    s = s.replace(/&lt;/g, "<"); 
    s = s.replace(/&gt;/g, ">"); 
    s = s.replace(/&nbsp;/g, " "); 
    s = s.replace(/&#39;/g, "\'"); 
    s = s.replace(/&quot;/g, "\""); 
    s = s.replace(/<br\/>/g, "\n"); 
    return s; 
  } 
 
console.log(html_decode('&lt;div&gt;123&lt;/div&gt;')); 
console.log(html_encode(html_decode('&lt;div&gt;123&lt;/div&gt;')));
</script>
</head>
<body>

</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論