Question

我的问题是为什么短语是红色的。应该只是>之后的单词。正则表达式是正确的（here）

$(".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(/&gt;(.*)$/, function (match, title) {
        return '&gt;<span class="red">' + title + '</span>';
    });
});

Answer 2

似乎HTML &和>已转义。在将字符传递给regEx之前尝试取消字符。

$(".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;
    }
});

DEMO： 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编码。

将类添加到最后一个单词

3 个答案: