javascript - 将类添加到最后一个单词

Question

我的问题是为什么这句话是红色的。应该只有后面这个词>。正则表达式是正确的（这里）

$(".some").html(function (i, text) {
    return text.replace(/([^>]*)$/, function (match) {
        return '<span class="red">' + match + '</span>';
    });
});

.red {
    color:#ff0000
}

<div class="some">RAW MATERIALS & CHEMICALS>Earth & Stone</div>

http://jsfiddle.net/Z4cMN/1/

Answer 1

text有特殊字符 html 编码，所以你应该寻找>.

http://jsfiddle.net/trevordixon/Z4cMN/10/

$(".some").html(function (i, text) {
    return text.replace(/>(.*)$/, function (match, title) {
        return '&gt;<span class="red">' + title + '</span>';
    });
});

Answer 2

看起来像 HTML&并被>转义。在将字符传递给正则表达式之前尝试取消转义字符。

$(".some").html(function (i, text) {
    return htmlDecode(text).replace(/([^>]*)$/, function (match) {
        return '<span class="red">' + match + '</span>';
    });

    function htmlDecode(input) {
        var e = document.createElement('div');
        e.innerHTML = input;
        return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }
});

演示：http: //jsfiddle.net/fptbd/

Answer 3

还有另一种比正则表达式更好的方法。它利用了 DOM 的力量：因此它是浏览器本身理解网页的方式。

var textnode = $(".some").contents().last().get(0), // get the last node in .some
    last = textnode.splitText(textnode.data.lastIndexOf('>') + 1); // split it after the last >

$(last).wrap('<span class="red"/>'); // wrap the newly-created node in a span

http://jsfiddle.net/Z4cMN/11/

请注意，这允许我们以更直观的方式使用文本数据，而不用担心 HTML 编码。