Reemplazar palabra (s) con imagen usando Javascript / Jquery

Tengo esto:

$(".forum-threadview-post-text:contains(':P')").html(":P").replaceWith(""); 

Se supone que debe tomar cualquier instancia de ‘: P’ y reemplazarlo con una imagen de emoticón. Sin embargo, toma publicaciones con: P y reemplaza toda la publicación con esa imagen. ¿Cómo puedo reemplazar solo el: P.

Tratar

 var tImg = ""; $(".forum-threadview-post-text:contains(':P')").html(function (_, html) { return html.replace(/:P/g , tImg ) }); 

Manifestación

La razón por la cual la suya no funciona como se espera es porque está reemplazando los elementos con la imagen, no el contenido específico de la misma. Puede usar .html (function (index, oldhtml)) para obtener el html de cada elemento y reemplazarlo.

O:

 $(".forum-threadview-post-text:contains(':P')").contents().each(function () { if(this.nodeType === 3 && /:P/g.test(this.nodeValue)) { $(this).parent().html(this.nodeValue.replace(/:P/g,"")); } }); 

Creo que es mejor no dar por supuesto que el texto será un elemento secundario inmediato del selector que se ha transferido. También veo como algo arriesgado suponer que el texto que está buscando no puede aparecer dentro de una etiqueta HTML descendiente. Todas las otras respuestas dadas hasta ahora tienen problemas en al menos una de estas áreas.

Además, es aún mejor hacer que el código sea reutilizable. Las siguientes funciones fácilmente reutilizables harán exactamente lo que necesita, ¡no se estropearán por los atributos de tags HTML extraviadas y funcionarán!

 function descendantContents($el, textToFind) { // this could be made a jQuery plugin var result = $el .find(':not(script)') .contents() .filter(function () { return this.nodeType === 3 && $(this).text().indexOf(textToFind) !== -1; }); return result; } function replaceText(scopeSelector, textToFind, replacementHtml) { descendantContents($(scopeSelector), textToFind) .each(function () { var element = $(this); var parts = element.text().split(textToFind); element.before(document.createTextNode(parts[0])); for (var i = 1, l = parts.length; i < l; i += 1) { element.before(replacementHtml); element.before(document.createTextNode(parts[i])); } element.remove(); }); }; 

Estas funciones han sido probadas en Firefox 25.0.1, Chrome 30.0.1599.101 my 10.0.9200.16721 usando jQuery 1.6.1 (lo sé, es una versión antigua, pero eso debería hacerte sentir mejor, no peor).

Para cualquiera que desee mejorar, intente su código con este HTML:

 
will this really work :P