javascript - jQuery / javascript: 文字を見つけて、それを含む単語をラップします

Question

改行なしの CSS ルールを追加できるように、1 つ以上のハイフン「-」を含むテキスト内のすべての単語をスパンにラップしようとしています。残念ながら、これを達成する方法がわかりません。アイデア/ヒントをいただければ幸いです。ありがとう！

例：

    Before: <p>This product is ready-to-use.</p>
    After:  <p>This product is <span class="nbr">ready-to-use</span>.</p>

Answer 1

少し前にlibを書きました。DOM テキスト ノードで動作するため、RegEx を使用した HTML の解析を回避できます (これは不可能です)。

https://github.com/prinzhorn/linguigi

例

var ling = new Linguigi();

ling.eachToken(/[\w-]+/, true, function(token) {
    return '<span class="nbr">' + token + '</span>';
});

ニーズにより適した正規表現を使用することをお勧めします。

Answer 2

次の正規表現はトリックを行います：

((\w+-)+\w+)(?![^<]*\>)

この((\w+-)+\w+)部分は、ハイフンで区切られた単語に一致する正規表現です。の後の部分は、式の前にaを持つ a(?!が続かないことを確認します。これは、html タグ内のハイフンで区切られた単語との一致を避けるためです (例: . おそらくそれと一致したくないでしょう)。><<div class="style: margin-left">margin-left

JavaScript で正規表現を使用するには、生の文字列を使用し、正規表現の周りに括弧を追加して、一致した値をグループとしてキャプチャする必要があります。

text.replace(/(((\w+-)+\w+)(?![^<]*\>))/m, '<span class="nbr">$1</span>');

Answer 3

    String text = "<p>This product is ready-to-use.</p>";
    text = text.replaceAll("(\\w+-(\\w+-?)+)", "<span class=\"nbr\">$1</span>");
    System.out.println(text);