Trova la stringa di testo in jQuery e rendila grassetto

Quello che voglio fare è usare jQuery per trovare un pezzo di testo all’interno di un paragrafo e aggiungere del CSS per renderlo grassetto. Non riesco a capire perché questo non funzionerà:

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

Il testo in “about_theresidency” viene richiamato dynamicmente, quindi lo eseguo dopo che la finestra è stata caricata.

Puoi usare replace() con html() :

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

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

L’ho trasformato in un plugin lil, qui:

 $.fn.wrapInTag = function(opts) { var tag = opts.tag || 'strong' , words = opts.words || [] , regex = RegExp(words.join('|'), 'gi') // case insensitive , replacement = '< '+ tag +'>$&'; return this.html(function() { return $(this).text().replace(regex, replacement); }); }; // Usage $('p').wrapInTag({ tag: 'em', words: ['world', 'red'] }); 

Ho avuto un problema simile e ho cercato di utilizzare la soluzione proposta da elclanrs. Funziona alla grande, ma solo se non hai elementi HTML all’interno del testo che vuoi modificare. Se ci fossero dei tag all’interno del testo, sarebbero andati persi dopo l’esecuzione della funzione wrapInTag .

Ecco la mia soluzione al problema del nodo interiore (ho incluso collegamenti alle risorse che ho usato per scrivere il codice).

 // 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 + '>$&'; // 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); } }); }; 

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

Provare:

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

Serviva un metodo più sicuro, che potesse sfuggire. Ecco una soluzione alla vaniglia

 var str = 'The world is big world 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, '$&') document.body.appendChild(p) console.log(p.outerHTML)