javascript - 为什么这对编码和解码 HTML 有效

Question

我试图找到一种简单快捷的方法来解码和编码文本。

我发现的最好的是下面这个。

1. 使用它有什么不同$("<div/>")吗？为什么即使没有 div 也在这里？

2. 你有什么更简单、更快捷的 HTML 编码和解码方法吗？

代码：

var myHTMLstring = "<p /> + <br /> sdfsdfdsfdsfsdfsdfsdfsfsfsfdsf";

var myEncoded = $('<div/>').text(myHTMLstring).html();
//&lt;p /&gt; + &lt;br /&gt; sdfsdfdsfdsfsdfsdfsdfsfsfsfdsf


var myDecoded = $('<div/>').html(myEncoded).text();
//<p /> + <br /> sdfsdfdsfdsfsdfsdfsdfsfsfsfdsf

Answer 1

它之所以有效，是因为 jQuerytext方法使用createTextNode()，它用它们的 HTML 实体等价物替换特殊字符。您可以使用该方法¹来创建替代方案，但如果您仍然使用 jQuery，那么您使用的方法既好又快。

¹这将是普通的 javascript 等价物：

function encode(htmlstr){
   var x = document.createTextNode()
      ,y = document.createElement('div');;
   x.textContent = htmlstr;
   y.appendChild(x);
   return y.innerHTML;
}

function decode(htmlstr){
   var y = document.createElement('div');;
   y.innerHTML = htmlstr;
   return y.innerText || y.textContent;
}

甚至一口气：

function htmlcode(htmlstr,doDecode){
   var x = document.createTextNode()
      ,y = document.createElement('div');;
   x.textContent = htmlstr;
   if (doDecode) { y.innerHTML = htmlstr; }
   else { y.appendChild(x); }
   return doDecode? (y.innerText || x.textContent) : y.innerHTML;
}

jsfiddle 演示