查找并删除文本，然后使用 jquery 或 javascript 插入图像

发布于 2024-11-18 03:50:38 字数 418 浏览 5 评论 0原文

我正在尝试使用 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

这是我正在搞乱的聊天应用程序，而且我相当新，所以如果你可以在其中包含一些解释你的代码有帮助:)

原文

im trying to replace text with an image using jquery or javascript. for example

<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>

ive attempted a few things but either i end up replacing the entire string or the browser does not render the image and instead displays the html

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

this is for a chat application im messing with and im fairly new so if you can include some explanation in your code thatd help :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖彼岸 2024-11-25 03:50:38

可能看起来像（使用 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;
});

Could look like (using jQuery):

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

Obivously this should get a little more sophisticated. I could imagine a lookup object where you link strings to images, for instance:

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

回复收藏 0 原文

七秒鱼° 2024-11-25 03:50:38

你尝试过这样做吗？

<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/

Have you tried doing this?

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

Fiddle here: http://jsfiddle.net/PuDMx/

回复收藏 0 原文

~没有更多了~