24

テキストに浮かんでいるURLとドメインを見つけて「リンク」するために、GitHub(https://github.com/cowboy/javascript-linkify )のLinkifyプロジェクトに誘導されました。

それは素晴らしいです!それは完全にテキストで機能します!

textNodeただし、リンクしたいテキストが含まれているで、どのように機能させるかはよくわかりません。

textNode私はそれ以来唯一持っていることを理解してtextContentいます..それはすべてテキストです。このLinkify関数はHTMLをテキストとして返すので、textNodeを取得し、Linkify出力を使用してその中のHTMLを「書き換える」方法はありますか?

私はここでJSFiddleで遊んでいます:http://jsfiddle.net/AMhRK/9/

function repl(node) {
  var nodes = node.childNodes;
  for (var i = 0, m = nodes.length; i < m; i++) {
    var n = nodes[i];
    if (n.nodeType == n.TEXT_NODE) {
      // do some swappy text to html here?
      n.textContent = linkify(n.textContent);
    } else {
      repl(n);
    }
  }
}
4

2 に答える 2

26

textNodeをスパンなどのHTML要素に置き換えてから、linkified-textをその要素のinnerHTMLとして設定する必要があります。

var replacementNode = document.createElement('span');
replacementNode.innerHTML = linkify(n.textContent);
n.parentNode.insertBefore(replacementNode, n);
n.parentNode.removeChild(n);
于 2013-03-21T17:11:01.397 に答える
10

以前の回答に加えて、私はより短い方法を提案します(jQueryに基づく):

$(n).replaceWith('Some text with <b>html</b> support');

ここで、n-はtextNodeです。

またはネイティブバージョン

var txt = document.createElement("span");
txt.innerHTML = "Some text with <b>html</b> support";
node.replaceWith(txt);

nodetextNodeはどこですか

于 2017-02-02T17:11:35.300 に答える