jQuery：用跨度包装部分文本答案

【问题标题】：jQuery: Wrapping a part of text with a spanjQuery：用跨度包装部分文本
【发布时间】：2012-07-22 22:09:04
【问题描述】：

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

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

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

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

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

【问题讨论】：

你愿意做这个服务器端吗？这将更容易，更高效
@Sam +1 如果可能的话，这绝对应该在服务器端完成。

标签： jquery regex

【解决方案1】：

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

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

【讨论】：

这真的很有用，但我想知道有人可以向我解释为什么函数中需要 i 参数吗？

【解决方案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 做很多相同的事情。

【讨论】：

很好的解决方案。它成功了，但我最终还是选择了约瑟夫的解决方案。不过谢谢。