3

私のクライアント用に構築したシンプルなCMSがあります。

この問題は、おそらくアンカー タグを介してリンクを投稿する代わりに、リンクをテキスト エディターに直接コピー アンド ペーストすることです。

これらのリンクを JavaScript を使用してアンカー タグでラップする方法はありますか? したがって、ページが読み込まれると、見た目ではなく次のようにリンクされます。

http://google.com

このようになります

<a href="http://google.com" target="_blank">http://google.com</a>

ユーザーが回答/質問にURLを投稿すると、スタックオーバーフローは実際にこれを行います（それが私が達成しようとしていることを理解するのに役立つ場合）。

4

1 に答える 1

5

これらの線に沿って何かを試すことができます。のようなカスタム属性を使用して、これらの置換を有効にするタグを装飾しますdata-linkify。

<div data-linkify>something http://google.com something</div><div linkify>something</div>

setを使用して、任意の要素内で置換を実行できるようになりdata-linkifyました。

$('*[data-linkify]').each(function() { 
  $(this).html($(this).html().replace(/(?:(https?\:\/\/[^\s]+))/m, '<a href="$1">$1</a>'));
});

いくつかの注意事項があります。これはまったく優れた正規表現ではありません。単純に、最初の空白文字から始まる、http://またはhttps://最初の空白文字までのすべてに一致します。正規表現に一致するより適切な URL を探します。

また、replace against を使用すると、たまたま要素.html()に該当する既存のリンクが壊れることになります。data-linkifyテキスト リンクに二重引用符が含まれていると、壊れたアンカー要素が作成されます。

リンクを識別するために、ある種の非常に単純なマークアップを検討することもできます。推測するよりもはるかに優れています。

于 2013-10-21T00:57:08.723 に答える