Question

假设我有以下HTML：

<div>
<p>TEST TEST</p>
<p>TEST</p>
</div>

我想在一次点击按钮上找到并突出显示所有单词TEST。

我目前正在使用JS函数查找并加粗这是一个迷你插件：

function findAndBold(searchText, replacement, searchNode) {
    if (!searchText) {
        // Throw error here if you want...
        return;
    }

    var regex = typeof searchText === 'string' ? new RegExp(searchText, 'i') : searchText;
    var childNodes = (searchNode || document.getElementById("mainContent")).childNodes;
    var cnLength = childNodes.length;


    while (cnLength--) {

        var currentNode = childNodes[cnLength];

        if (currentNode.nodeType === 1) {
            arguments.callee(searchText, replacement, currentNode);
        }

        if (currentNode.nodeType !== 3 || !regex.test(currentNode.data)) {
            continue;
        }

        var parent = currentNode.parentNode;

        var frag = (function () {
            var boldText = "<span style='background-color: yellow; display: inline;'>" + searchText + "</span>";
            var html = currentNode.data.replace(regex, boldText);
            var wrap = document.createElement('div');
            frag = document.createDocumentFragment();
            wrap.innerHTML = html;
            while (wrap.firstChild) {
                frag.appendChild(wrap.firstChild);
            }

            return frag;
        })();

        parent.insertBefore(frag, currentNode);
        parent.removeChild(currentNode);

    }

}

该函数的问题在于，在第一次单击时，它只会在每个段落中找到第一次出现的单词TEST，并且只有当我再次单击“查找”时，它才会突出显示另一个“测试”单词。

我希望有人可以提供帮助。谢谢。

Answer 1

如果我理解了这个问题，你应该将标志g（for global）添加到正则表达式中

之类的东西

var regex = new RegExp(searchText, 'ig');

另见here以供参考

Answer 2

如下所示更改正则表达式并尝试：

var regex = typeof searchText === 'string' ? new RegExp(searchText, 'gi') : searchText;

找到在同一元素中出现多次的单词

2 个答案: