jquery - jQuery：用跨度包装部分文本

Question

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

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

我希望能够用一个跨度来包装海报的名字，这不一定总是 1 个单词，它可以是 John Smith 或 John H Smith。

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

我认为正则表达式是前进的方向，但我以前从未接触过这一点。

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

$("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 的splitTextfunction做很多相同的事情。