11

文字列をから回す簡単な方法はありますか

Then go to http:/example.com/ and foo the bar!

の中へ

Then go to <a href="http://example.com">example.com</a> and foo the bar!

既存の HTML ページ内の Javascript で?

4

2 に答える 2

14

はい。最も簡単な方法は、正規表現を使用して、リンクのように見えるものをリンクされた同等のものに置き換えることです。何かのようなもの：

node.innerHTML = node.innerHTML.replace(/(http:\/\/[^\s]+)/g, "<a href='$1'>$1</a>")

(私の正規表現は少しさびているので、構文をいじる必要があるかもしれません)。これは単純なケースです。ここでスクリプト インジェクションに注意する必要があります (たとえば、私が持っている場合http://"><script>doevil()</script>)。これを回避する 1 つの方法は、リンク構築関数を使用することです。

node.innerHTML = node.innerHTML.replace(/ ... /g, buildLink($1));

buildLink()URL に悪意のあるものが含まれていないことを確認できる場所。

ただし、RegEx-innerHTML メソッドは、ノードの HTML コンテンツ全体を破棄して再構築するため、大量のテキストではうまく機能しません。これは DOM メソッドでも実現できます。

  • テキストノードへの参照を見つける
  • コンテンツで、URL の開始インデックスと終了インデックスを見つけます
  • メソッドを使用splitText()して、ノードを 3 つに分割します: before、link、after
  • リンクと同じ<a>ノードを作成しますhref
  • リンクの前にinsertBefore()このノードを挿入するために使用します<a>
  • appendChild()リンクを<a>ノードに移動するために使用します
于 2010-03-29T06:00:31.413 に答える
3

まず、「ページ」は実際には DOM ツリー (部分的にテキスト ノードで構成され、ほとんどが HTML 要素で構成されている) であるため、「HTML ページ内」というのは難しいです。

この問題に対処する最も簡単な方法は、コンテンツが豊富なテキスト ノードをターゲットにすることです。各テキスト ノードに、次のようなものを適用します。

// we'll assume this is the string of a content-rich text node
var textNode = document.getElementById('contentNode');
textNode.innerHTML = textNode.innerHTML.replace(/(\s)(http:\/\/[^\s]+)(\s)/g, '$1<a href="$2">$2</a>$3');

ところで：ここにはセキュリティへの影響があります。滅菌されていないテキストからリンクを生成すると、XSS の可能性があります。

于 2010-03-29T06:15:20.447 に答える