javascript - 使用 jQuery 将 添加到标签的一部分

Question

我正在尝试使用 jQuery 将跨度添加到标签的一部分。我能够隔离我想要添加跨度的部分(查看我的 fiddle 并通过控制台检查)，但现在我已经知道了，我不知道如何添加实际跨度。我需要它来设置标签的特定部分的样式(在本例中以“红色”为例)。不幸的是，标记是动态生成的，所以我不能手动添加它。

这是我的 fiddle 。

如果您更愿意在此处查看，这里是我的淡化代码片段:

HTML:

<input type="checkbox" /><label> Some Number (XXXXXX1234)</label><br />
<input type="checkbox" /><label> Some Other Number (XXXXXX4567)</label><br />
<input type="checkbox" /><label> Some Number (XXXXXX7890)</label>

CSS:

span {
    color: red;
}

JS:

var label = $('label');

$.each(label, function() {

    var arr = $(this).text().split(' '),
        num = arr[arr.length-1];

    console.log(num);

});

这就是我要开始的:

<input type="checkbox" /><label> Some Number (XXXXXX1234)</label><br />

这就是我要实现的目标:

<input type="checkbox" /><label> Some Number <span>(XXXXXX1234)</span></label><br />

整个站点将有多个输入，因此 $.each。

我在 Stack Overflow 上找到了这个难题的部分答案，只是不是完成任务的正确组合。

Answer 1

将其与正则表达式匹配，并将跨度插入返回到 html() 函数的字符串中

$('label').html(function(_,html) {
    return html.replace(/(\(.*?\))/, "<span>$1</span>");
});

FIDDLE

如果你想分割空格并得到最后一部分，你可以这样做

$('label').html(function(_,html) {
    var parts = html.split(" ");
    var last  = parts.pop();
    parts.push('<span>', last, '</span>');
    return parts.join(" ");
});

FIDDLE