Question

如何替换某些列表中的所有*字符？

示例：

<div class="nav">
        <ul>
            <li><a href="#">Hotels *****</a></li>
            <li><a href="#">Hotels ****</a></li>
            <li><a href="#">Hotels ***</a></li>
            <li><a href="#">Some other menu</a></li>
        </ul>
</div>

jQuery示例：

$().ready(function () {
    if ($('.logo')[0].offsetWidth == 295) {
        $('.nav ul li a span').each(function () {
            string = $(this).text();
            $(this).html('<img src="img/star.png" alt="' + string + '" />');
        });
    }
});

我想改变所有的星星，而不仅仅是一个（使用这个代码，所有的工作都应该如此，除非它用一个图像改变所有星星）。它是多少明星char，那很多图像。

目标是改变它：

some text *****

带

some text <img src="img/star.png" alt="star" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" />

Answer 1

迭代所需元素并使用正则表达式将“*”更改为<img>元素。您需要在正则表达式上使用/g标志来更改字符串中的所有标志。

$('...').each(function() {
    var $this = $(this),
        html = $this.html();

    html = html.replace(/\*/g, '<img href="...">');
    $this.html(html);
});

Answer 2

您的选择器与您的标记不同步：

$('.nav ul li a span') - ＆gt;您的li

中没有跨度

修复那个选择器，这里有代码可以解决这个问题：

$('.nav ul li a').each(function() {
    var txt = $(this).text();
    var img = '<img src="img/star.png" alt="' + txt + '" />'
    var html = txt.replace(/\*/g, img);  // replace every star with an image tag
    $(this).html(html);
});

这是演示：http://jsfiddle.net/mrchief/kycae/

Answer 3

只需将函数传递给html()^[docs]方法，就可以非常干净地完成此任务。

$('.nav ul li a').html(function(i,html) {
    return html.replace(/\*/g, '<img src="http://dummyimage.com/30x30/f00/fff.png&text=*" alt="' + html + '" />');
});

示例： http://jsfiddle.net/vrqgv/

Answer 4

一旦你有了你的字符串：

some text *****

您可以使用split()和join()将星标替换为图片：

var original = 'some text *****' ;
var withImages = original.split('*').join('<img src="img/star.png" alt="star" />');

Split创建一个数组，每个元素由传入的字符串分隔，join将数组返回给字符串，在每个元素之间插入传递的字符串。

如何使用jQuery将图像替换为图像？

4 个答案: