web-dev-qa-db-fra.com

Rechercher une chaîne de texte dans jQuery et la mettre en gras

Ce que je veux faire, c'est utiliser jQuery pour trouver un morceau de texte dans un paragraphe et ajouter du CSS pour le mettre en gras. Je n'arrive pas à comprendre pourquoi cela ne fonctionne pas:

$(window).load(function() {
// ADD BOLD ELEMENTS
$('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

Le texte de "about_theresidency" est tiré dynamiquement, ce qui me permet de l'exécuter après le chargement de la fenêtre.

jquerycsshtml5
25
Michael

Vous pouvez utiliser replace() avec html():

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));

Edit:http://jsbin.com/AvUcElo/1/edit

Je l'ai transformé en un plugin, ici:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // case insensitive
    , replacement = '<'+ tag +'>$&</'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

// Usage
$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});
81
elclanrs

J'ai eu un problème similaire et j'ai essayé d'utiliser la solution proposée par elclanrs. Cela fonctionne très bien, mais seulement si le texte que vous souhaitez modifier ne contient aucun élément HTML. S'il y avait des balises dans le texte, elles auraient été perdues après l'exécution de la fonction wrapInTag.

Voici ma solution au problème interne aux nœuds internes (j'ai inclus des liens vers les ressources avec lesquelles j'ai écrit le code).

// http://stackoverflow.com/a/9795091
$.fn.wrapInTag = function (opts) {
    // http://stackoverflow.com/a/1646618
    function getText(obj) {
        return obj.textContent ? obj.textContent : obj.innerText;
    }

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex = RegExp(words.join('|'), 'gi'),
        replacement = '<' + tag + '>$&</' + tag + '>';

    // http://stackoverflow.com/a/298758
    $(this).contents().each(function () {
        if (this.nodeType === 3) //Node.TEXT_NODE
        {
            // http://stackoverflow.com/a/7698745
            $(this).replaceWith(getText(this).replace(regex, replacement));
        }
        else if (!opts.ignoreChildNodes) {
            $(this).wrapInTag(opts);
        }
    });
};

Exemple: http://jsbin.com/hawog/1/edit

11
jahu

Essayer:

$(window).load(function() {
// ADD BOLD ELEMENTS
    $('#about_theresidency:contains("cross genre")').each(function(){
        $(this).html( 
            $(this).html().replace(/cross genre/g,'<strong>$&</strong>')
        );
    });
});
1
iambriansreed

Besoin d'une méthode plus sécurisée, qui pourrait s'échapper. Voici une solution à la vanille 

var str = 'The world is big <b onclick="alert(false)">world</b> red. the world is also small'
var words = ['world', 'is']
var reg = RegExp(words.join('|'), 'gi')
var p = document.createElement('p')
p.innerText = str
p.innerHTML = p.innerHTML.replace(reg, '<u>$&</u>')

document.body.appendChild(p)
console.log(p.outerHTML)

0
Endless