Найдите и удалите текст, затем вставьте изображение с помощью jquery или javascript

Question

я пытаюсь заменить текст изображением, используя jquery или javascript.например,

<div id="log">
<p>this is a :) happy face</p>
<p>this is a :( sad face</p>
<p>these are :/ x( :P other faces</p>
</div>

Я попытался сделать несколько вещей, но либо я в итоге заменил всю строку, либо браузер не отображает изображение и вместо этого отображает HTML

this is a <img src="happy.png"> face

, это дляприложение для чата, с которым я работаю, и я довольно новый, так что, если вы можете включить какое-то объяснение в ваш код, это поможет:)

Answer 1

Может выглядеть (используя jQuery):

$('div#log').find('p').html(function( html ) {
    return html.replace(':)', '<img src="happy.png"/>');
});

Очевидно, что это должно стать немного сложнее. Я мог бы представить объект поиска, где вы связываете строки с изображениями, например:

var myMap = {
    '\\:\\)': 'happy.png',  // need to escape those for regex
    '\\:\\(': 'sad.png',
    '\\:\\/': 'other.png'
};

$('div#log').find('p').html(function( _, html ) {
    for(var face in myMap) {
        html = html.replace( new RegExp( face, 'g' ), '<img src="' + myMap[ face ] + '"/>' );
    }
    return html;
});

Answer 2

Вы пытались это сделать?

<div id="log">
<p id='my'>this is a :) happy face</p>
<p>this is a :( sad face</p>
<p>these are :/ x( :P other faces</p>
</div>

var p = $('#my').html();
var r = p.replace(':)', '<img src="happy.jpg">');
$('#my').html(r);

Скрипка здесь: http://jsfiddle.net/PuDMx/