1


3

textnode(JS-HTML)の特殊文字のエスケープを防ぎます

このスニペットhttp://bytes.com/topic/javascript/answers/504399-get-all-text-nodesに従いました

 var xPathResult = document.evaluate(
 './/text()[normalize-space(.) != ""]',
 document.body, null,
 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
 null ); for (var i = 0, l = xPathResult.snapshotLength; i < l; i++) {
 var textNode = xPathResult.snapshotItem(i);
 textNode.data = textNode.data.replace(/somePattern/g, 'replacement');
 }

たとえば、「| 12 |」のような特定のパターンを対応する絵文字に置き換えたいと思います。 しかし、 textNode.data.replace(" | 12 | "、 '<。img src =" favicon.ico "/>');`を実行すると、たとえば、テキストショーは `.. <。img src =" favicon .ico "/> .. htmlを調べると、 `<.img src =" favicon.ico "/>`が `<img src =" favicon.ico "/>`にエスケープされたことがわかります。これを防ぎ、画像を表示させるには?? ありがとうございました

注:目的に `<.img src =" favicon.ico "/>`を追加しました

3 Answer


5


はい、 `data`は常にプレーンテキストです。 これは、文字をエスケープすることを心配する必要がないことを意味しますが、「」のようなマークアップをその中にスローできないことも意味します。

単純な方法は、テキストインターフェースを使用する代わりに、含まれている要素の「innerHTML」を置き換えることです。 しかし、それはすぐに大きな問題を引き起こす可能性があります。「innerHTML」に書き戻すことは、要素内のすべての既存のノードを破棄して置き換えることを意味するためです(イベントハンドラーまたはそれらのフォーム値が破棄されている場合は厄介です) 、ただし、単純な文字列と正規表現の処理ではHTMLを適切に処理できないためです。 たとえば、属性値の中に文字列 `| 12 |`が含まれている場合、置換により大きな混乱が生じます。

より良い方法: `splitText`を使用して、テキストノードをパターンマッチの端でビットに切り刻み、そのマッチを表すテキストを新しいDOM要素に置き換えます。

var pattern= /\|12\|/;
var node= /* Text node you want to replace strings in */;

while (match= pattern.exec(node.data)) {
    var img= document.createElement('img');
    img.src= 'favicon.ico';

    node= node.splitText(match.index);
    node= node.splitText(match[0].length);
    node.parentNode.replaceChild(img, node.previousSibling);
};

(すべてのテキストノードを取得するXPathメソッドはIEでは利用できないことに注意してください。)


0


textNode.dataは、要素内のCDATAです。 必要なのは、textNode.innerHTML内で置き換えることです


0


すべてに感謝します:))すべてのテキストノードをループします

それはFirefoxの拡張機能です:D私はIEに近づくことはありません! あなたたちは素晴らしいです! 編集:インストールして試してください:D https://addons.mozilla.org/en-US/firefox/addon/14455/