为什么这可以编码和解码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

它的工作原理是因为jQuery text方法使用了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演示