0

我使用了一个工具提示库，我在其中转义 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) 相同的结果。

4

1 回答 1

0

您需要一个适当的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>在这种情况下）
  • 使用setAttributwdummy 元素上的方法设置属性
  • 获取.innerHTML容器的属性。这将返回虚拟元素加上实体字符串。剥离虚拟元素，并返回“转义”字符串。
于 2011-11-19T22:01:29.907 回答