Rechercher une chaîne de texte dans un élément et enveloppez de balises span autour d'elle

Je veux rechercher une chaîne de texte dans un élément et enveloppez de balises span autour d'elle. E. g.

À partir 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 que seule enveloppe l'ensemble contenant h2 tag.

InformationsquelleAutor Seb | 2013-04-18
  1. 71
    $("h2:contains('cow')").html(function(_, html) {
   return html.replace(/(cow)/g, '<span class="smallcaps">$1</span>');
});

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

    • Je demande parce que je suis intéressé - Où puis-je trouver de la documentation sur la syntaxe que vous utilisez? Plus précisément le function(_ , html) .
    • Je pense que le meilleur est jQuery documentation, api.jquery.com/html, en tant que de jQuery 1.4, html méthode accepte une fonction, le premier paramètre est l'index et le second est un contenu html.
    • Oui, j'ai vu - mais vous pouvez simplement fournir _ que l'index comme ça? Est-il fondamentalement juste d'envoyer un nul indice?
    • comme $ est un caractère valide pour la définition des identificateurs en JavaScript. ce n'est pas null. Il y a aussi une bibliothèque JavaScript nommé soulignement underscorejs.org
    • Génial, merci. J'ai appris quelque chose de nouveau.
    • Notez que cela ne fonctionne pas si vous avez certains de balisage contenant de vache à l'intérieur de l'élément. Comme <div><a href="cows">Click here</a></div>. Cela permettra de briser l'attribut.
    • C'est un bon point. Pas seulement de la "vache" mais chaque chaîne qui a de la "vache" segment en elle.
    • Je suis struggeling avec ce problème. Une idée de comment améliorer votre solution?
    • C'est l'une des options les plus simples. Une autre option est l'utilisation d'un plugin ou d'une solution qui parcourt les nœuds et ne cible que les nœuds de texte. Voici un plugin jQuery.

    InformationsquelleAutor undefined
  2. 12

    Une autre approche, divisé par mot-clé et joignez-vous à la mise à jour du html.

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

    Remarque: je n'ai pas testé, mais je suppose que ce serait effectuer de pire que de faire un remplacement, mais la figure je dirais de toute façon à des fins informatives

    • Il fonctionne bien, merci l'ami 🙂
    • Merci, l'un au-dessus n'était pas quand il y avait des balises html autour du mot clé pour commencer. Cela fonctionne parfaitement. Agréable d'avoir une alternative.
    • Je sais que c'est plusieurs années en bas de la ligne, mais j'ai créé un violon pour cette réponse.... jsfiddle.net/v2nqu05o
    InformationsquelleAutor Justin Bicknell
  3. 3

    Voici une variation sur @undefined réponse, 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>');
    });
});
    InformationsquelleAutor Justin Haight
  4. 0
    $("h2:contains('cow')").each(function() {
    var newText = $(this).html().replace("cow", "<span class='smallcaps'></span>");
    $(this).html(newText);
});
    • vous devez le modifier pour définir le code html de l'élément, et non le texte
    • Bon point, mis à jour.
    InformationsquelleAutor What have you tried
  5. 0

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

    - Ce la façon dont je l'ai fait suite à "Qu'avez-vous 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);
    InformationsquelleAutor Shraftali