如何在jQuery中用图片替换字符？

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 + '" />');
        });
    }
});

我想要改变所有的星星，而不是只有一个(使用这个代码，所有的工作都应该这样，除了它用一个图像改变所有的星星)。它应该是多少个星号字符，那么多的图像。

我们的目标是像这样改变它：

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') -> li%s中没有跨区

修复选择器，下面是可以完成此任务的代码：

$('.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

一旦你有了你的字符串：

some text ***** 

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

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

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