使用 js 处理 html entities

有的时候我们可能不得不使用 js 来处理 html entities,例如把 > 这样的内容转化成 > 符号,或者是相反的操作。如果你不幸遇到了这样的需求,下面的内容也许会有所帮助。

unescapeHtmlEntities 的实现非常简单,创建一个节点元素,然后将字符串写入这个元素的 innerHTML 属性,最后返回这个元素的文本内容。调用下面的函数时传参'>',得到的结果将会是'>'

function unescapeHtmlEntities(str) {

var tempEle = document.createElement("div");

tempEle.innerHTML = str;

var result = tempEle.childNodes[0].nodeValue;

return result;

}

escapeHtmlEntities 的过程刚好相反,创建元素,插入文本节点,读出元素的 innerHTML 时,得到字符的 entity。调用下面的函数时传参'>',得到的结果将会是'>'

function escapeHtmlEntities(str) {

var tempEle = document.createElement("div");

tempText = document.createTextNode(str);

tempEle.appendChild(tempText);

var result = tempEle.innerHTML;

return result;

}



alert(escapeHtmlEntities('>'));  // result : >

如果使用 jQuery,这个两个函数可以一句话搞定:

function unescapeHtmlEntities(str) {

    return $('<div />').html(str).text();

}

function escapeHtmlEntities(str){

    return $('<div />').text(str).html();

}

尽管如此,对于 html entities 的处理并不推荐在行为层中进行。事实上模板、后端语言更能更好地进行工作,例如 PHP 的 htmlentities :

你可能感兴趣的:(html)