Encontrar cadena de texto en jQuery y hacer que sea negrita

Lo que quiero hacer es usar jQuery para buscar un fragmento de texto dentro de un párrafo y agregar algo de CSS para que quede en negrita. Parece que no puedo entender por qué esto no funcionará:

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

El texto en “about_theresidency” se arrastra dinámicamente, de ahí que lo ejecute después de que se haya cargado la ventana.

Puede usar replace() con html() :

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

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

Lo convertí en un plugin lil ‘, aquí:

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

Tuve un problema similar e intenté usar la solución propuesta por elclanrs. Funciona muy bien, pero solo si no tiene elementos html dentro del texto que desea modificar. Si hubiera tags dentro del texto, se habrían perdido después de ejecutar la función wrapInTag .

Aquí está mi solución para el problema del nodo interno (incluí enlaces a los recursos que usé para escribir el 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); } }); }; 

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

Tratar:

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

Se necesitaba un método más seguro, que pudiera escapar. Aquí hay una solución vainilla

 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)