web-dev-qa-db-ja.com

要素内のテキスト文字列を検索し、いくつかのスパンタグをラップします

要素内のテキストの文字列を検索し、いくつかのスパンタグをラップします。例えば。

から：

<h2>We have cows on our farm</h2>

に：

<h2>We have <span class='smallcaps'>cows</span> on our farm</h2>

私はもう試した：

$("h2:contains('cow')").each(function() {
 $(this).text().wrap("<span class='smallcaps'></span>");
});

ただし、それはh2タグを含む全体をラップするだけです。

jquerystringtext
36
Seb
$("h2:contains('cow')").html(function(_, html) {
   return html.replace(/(cow)/g, '<span class="smallcaps">$1</span>');
});

http://jsfiddle.net/w5ze6/1/

72
undefined

キーワードで分割し、更新されたhtmlと結合する別のアプローチ。

$("h2:contains('cow')").html(function(_, html) {
   return html.split('cow').join("<span class='smallcaps'>cow</span>");
});

注：私はこれをテストしていませんが、これは置換を行うよりもパフォーマンスが悪いと想定していますが、参考のためにとにかく含める図

13
Justin Bicknell

以下は@undefinedの回答のバリエーションで、アイテムの配列をループします。

var barnyardArray = [
    'cow',
    'horse',
    'chicken',
    'hog',
    'goat',
    'goose',
    'duck',
    'llama'
];

$.each(barnyardArray, function (index, value) {
    $("p:contains(" + value + ")").html(function (_, html) {
        var regex = new RegExp(value, 'g');
        return html.replace(regex, '<span class="smallcaps">' + value + '</span>');
    });
});
3
Justin Haight

私の場合、ターゲットdiv内にタグとテキストをリンクにラップする必要のあるテキストがあります。

これは、「何を試しましたか」に従っています。

var oldText = $(this).text(),
newText = $(this).html().replace(
    oldText, 
    "<a class='k-link' href='#' class='smallcaps'>" + 
        oldText + 
    "<span class='k-icon k-i-arrow-n'></span></a>"
);
$(this).html(newText);
0
Shraftali
$("h2:contains('cow')").each(function() {
    var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
    $(this).html(newText);
});
0
What have you tried