Question

我有一个文本文件，其中包含大量未格式化的文本行：

this is string 1
this is string 2 with multiple ch$r$t#rs and in-text citations[1]
this is string 3

...

我需要使用这些字符串作为JS函数的输入，该函数突出显示网页上每次出现的字符串。理想情况下，会有一种方法将文本文件传递给函数。

哪种函数/代码最适合用JavaScript实现？

Answer 1

以下是jQuery的“突出显示”插件，允许您喜欢的任何输入..

$.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.each(function()
        {
            innerHighlight(this, pat.toUpperCase());
        }
    );
};
$.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function()
        {
            this.parentNode.firstChild.nodeName;
            with (this.parentNode) {
                replaceChild(this.firstChild, this);
                normalize();
            }
        }
    ).end();
};

它的用法：

$('body').highlight(needle);

我的CSS（但您可以设置自己的CSS）：

.highlight {background-color:yellow;color:black;}

如何使用JS突出显示网页上的字符串列表？

1 个答案: