Question

我有一个示例jsfiddle here。

你会看到我创建了几个div类。我可以搜索文本并获得突出显示的答案，但我希望能够搜索div的值并让整个div（在这种情况下为方框）突出显示或填充颜色。

这是我用于隔离文本的javascript，但我无法解决上述问题......

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.getElementById("button").blur();
            document.execCommand("HiliteColor", false, "yellow");
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, "yellow");
            textRange.collapse(false);
        }
    }
}

使用jQuery可以更恰当地完成这个吗？

Answer 1

这是jquery的更新小提琴：http://jsfiddle.net/2e5HZ/2/

function doSearch(text) {    
    $("#content").find("div").each(function() {
        var div = $(this);
        if (div.html() == text) {
            div.addClass('highlight');
        } else {
            div.removeClass('highlight');
        }
    });
}

我所做的是找到内容中的所有div，如果该div的html与搜索匹配，我们添加突出显示类

.highlight { background: yellow; border: 2px solid red; }

如果不是，我们删除突出显示类（重置）

Answer 2

我forked your fiddle here。我添加了一行CSS（一个新类：突出显示）并将doSearch（）函数缩小到这两行jQuery：

$('#content div').removeClass('highlight');
$('#content div:contains(' + text + ')').addClass('highlight');

它首先从内容div中的每个div中删除高亮类，然后将该类添加回包含所需文本的任何div。

Answer 3

以下是纯JS的解决方案：

jsFiddle

function doSearch(text) {
    var divs = document.getElementById('content').getElementsByTagName('div');
    var pattern = new RegExp(text);
    for (var i in divs) {
        if (pattern.test(divs[i].innerHTML)) {
            var classes = divs[i].className.split(' ');
            classes.push('highlight');
            divs[i].className = classes.join(' ');
        }
    }
}

添加一个CSS类：

.highlight {
    background-color: yellow;
}

如何基于搜索突出显示整个div

3 个答案: