Question

如何选择字符串的一部分？

我的代码（或example）：

<div>some text</div>

$(function(){
    $('div').each(function(){
        $(this).text($(this).html().replace(/text/, '<span style="color: none">$1<\/span>'));
    });
});

我尝试了这种方法，但在这种情况下也选择了所有上下文：

$(function(){
    $('div:contains("text")').css('color','red');
});

我试着这样：

<div><span style="color: red">text</span></div>

Answer 1

$('div').each(function () {
    $(this).html(function (i, v) {
        return v.replace(/foo/g, '<span style="color: red">$&<\/span>');
    });
});

Answer 2

你到底想要做什么？你现在正在做的是获取每个匹配的DIV的HTML，如果它出现（字面意思是“text”），然后将其设置为 text 元素的元素（因此您将在页面上看到HTML标记）。

如果你真的想用实际的单词“text”做些什么，你可能想在你的第一个函数调用中使用html而不是text：

$('div').each(function(){
    $(this).html($(this).html().replace(/text/, '<span style="color: none">$1<\/span>'));
         // ^-- here
}

但是如果您尝试在div的文本周围包围一个范围，可以使用wrap来执行此操作：

$('div').wrap('<span style="color: none"/>');

像这样：http://jsbin.com/ucopo3（在这个例子中，我使用了“color：blue”而不是“color：none”，但你明白了。）

Answer 3

$(function(){
    $('div:contains("text")').each(function() {
        $(this).html($(this).html().replace(/(text)/g, '<span style="color:red;">\$1</span>'));
    });
});

我已经更新了你的小提琴：http://jsfiddle.net/nMzTw/15/

Answer 4

使用innerHTML作为HTML字符串与DOM交互的一般做法有许多严重的缺点：

删除或替换事件处理程序
打开脚本注入攻击的可能性
不适用于XHTML

它也鼓励懒惰的思考。在此特定实例中，您将匹配HTML中的字符串“text”，并假设字符串的任何出现都必须位于文本节点内。这显然不是一个有效的假设：例如，字符串可能出现在title或alt属性中。

使用DOM方法。这将解决所有问题。以下将仅使用DOM方法在regex元素的后代的每个文本节点中围绕<div>的每个匹配：

$(function() {
    var regex = /text/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            return [node];
        } else {
            var textNodes = [];
            for (var n = node.firstChild; n; n = n.nextSibling) {
                textNodes = textNodes.concat(getTextNodes(n));
            }
            return textNodes;
        }
    }

    $('div').each(function() {
        $.each(getTextNodes(this), function() {
            var textNode = this, parent = this.parentNode;
            var result, span, matchedTextNode, matchLength;
            while ( textNode && (result = regex.exec(textNode.data)) ) {
                matchedTextNode = textNode.splitText(result.index);
                matchLength = result[0].length;
                textNode = (matchedTextNode.length > matchLength) ?
                    matchedTextNode.splitText(matchLength) : null;
                span = document.createElement("span");
                span.style.color = "red";
                span.appendChild(matchedTextNode);
                parent.insertBefore(span, textNode);
            }
        });
    });
});

如何选择字符串的一部分？

4 个答案: