Encontre uma string de texto em jQuery e faça-a em negrito

O que eu quero fazer é usar o jQuery para encontrar um pedaço de texto dentro de um parágrafo e adicionar algum CSS para torná-lo em negrito. Eu não consigo descobrir porque isso não funciona:

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

O texto em “about_theresidency” é extraído dinamicamente, portanto, eu o executo depois que a janela é carregada.

Você pode usar replace() com html() :

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

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

Eu o transformei em um plugin lil, aqui:

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

Eu tive um problema semelhante e tentei usar a solução proposta por elclanrs. Ele funciona muito bem, mas apenas se você não tiver elementos HTML no texto que deseja alterar. Se houvesse alguma tag dentro do texto, elas seriam perdidas depois de executar a function wrapInTag .

Aqui está a minha solução amiga do nó interno para o problema (incluí links para os resources que usei para escrever o código).

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

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

Experimentar:

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

Precisava de um método mais seguro, que pudesse escaping. Aqui está uma solução de baunilha

 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)