Trouver une chaîne de texte dans un élément et envelopper des balises span autour

Question

Je veux trouver une chaîne de texte dans un élément et envelopper des balises span autour. Par exemple.

De:

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

À:

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

J'ai essayé:

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

Mais cela n'enveloppe que l'ensemble contenant h2 tag.

Answer 1

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

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

Answer 2

Une autre approche, divisée par mot-clé et rejoignez le html mis à jour.

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

Remarque: je n'ai pas testé cela, mais je suppose que cela fonctionnerait moins bien que de faire un remplacement, mais le chiffre que j'inclurais de toute façon à des fins informatives

Answer 3

Voici une variante de la réponse de @ undefined, qui parcourt un tableau d'éléments:

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>');
    });
});

Answer 4

Dans mon cas, j'ai une balise à l'intérieur de la div cible et du texte dont j'ai besoin pour envelopper ce texte dans un lien.

C'est comme ça que j'ai fait "Qu'est-ce que tu as essayé".

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);

Answer 5

$("h2:contains('cow')").each(function() {
    var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
    $(this).html(newText);
});