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 を本質的に 2 回エスケープできる賢い方法はありますか? 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>この場合）
  • setAttributwダミー要素のメソッドを使用して属性を設定します
  • .innerHTMLコンテナのプロパティを取得します。これにより、ダミー要素とエンティティ化された文字列が返されます。ダミー要素を削除し、「エスケープされた」文字列を返します。
于 2011-11-19T22:01:29.907 に答える