双重转义 HTML

Question

我使用了一个工具提示库，我在其中转义 HTML 并将其放置在 title 属性中。当您将鼠标悬停在该元素上时，它会取消转义 HTML 并将其放置在工具提示中。

我遇到的问题是递归。我在工具提示中有一个按钮，它也有一个工具提示。例如：

nested_toooltip = "<h1>Hi, I'm a tooltip</h1>"
tooltip = '<a title="' + escapeHtml(nested_tooltip) + '">Button</a>"
document.write('<a title="' + escapeHtml(tooltip) + '">Button</a>"')

当您创建第一个工具提示时，它会取消转义所有工具提示。而且我基本上得到了格式错误的 HTML。有没有一种聪明的方法可以做到这一点，HTML 基本上可以被转义两次？因为 escapeHtml(escapeHtml(string)) 产生与 escapeHtml(string) 相同的结果。

Answer 1

你需要一个合适的escapeHTML函数（相当于PHP的htmlentities()）。

function escapeHTML(s){
    var d = document.createElement("div");            //Container
    d.innerHTML = "<a></a>";                          //Placeholder
    d.firstChild.setAttribute("title", s);            //Setter
    return d.innerHTML.match(/^<a[^"]+"([^"]*)"/i)[1];//Returns entitied html
}

代码说明：

• 创建容器
• 在其中存储一个虚拟元素（在本例中为<a>）
• 在虚拟元素上使用setAttributw 方法来设置属性
• 获取容器的.innerHTML 属性。这将返回虚拟元素加上实体字符串。剥离虚拟元素，并返回“转义”字符串。