Question

我如何在带有跨度的段落中包装一段文本。例如，在：

<p class="info"> Posted by johnny, 20/07/2012 4:47pm (3 days ago) </p>

我希望能够用一个跨度包装海报的名字，这不一定总是一个字，可能是约翰史密斯，或约翰史密斯。

基本上我想包装“发布者”之后和段落中最后一个逗号（，）之前的内容。

我认为正则表达式是前进的方向，但我以前从未触及过它。

Answer 1

$('.info').html(function(i, v) {
    return v.replace(/(Posted by )([^,]+)(,)/, '$1<span class="auther">$2</span>$3');
});

这是小提琴：http://jsfiddle.net/9Urph/

Answer 2

我认为正则表达式是前进的方向，但我以前从未触及过它。

不一定，虽然这是一种选择。

基本上，你必须找到逗号（因为你已经知道"Posted by"有多长）。找到它的最简单方法是String#indexOf。找到它后，您只需要拆分文本即可。你可以这样做：Live example | source

$("p.info").each(function() {
    var $this = $(this),
        html = $this.html(),
        comma = html.indexOf(",");
    html = html.substring(0, 10) + // 10 = length of "Posted by "
           "<span>" +
           html.substring(10, comma) +
           "</span>" +
           html.substring(comma);
    $this.html(html);
});

...或者您也可以使用DOM API splitText function做同样的事情。

jQuery：用span填充部分文本

2 个答案: