如何根据搜索突出显示整个 div答案

【问题标题】：How to highlight an entire div based on search如何根据搜索突出显示整个 div
【发布时间】：2013-08-29 05:22:32
【问题描述】：

我有一个示例 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 更恰当地完成吗？

【问题讨论】：

标签： javascript highlight

【解决方案1】：

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

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

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

【讨论】：

@crowebird - 他们的回答也是正确的，但我更喜欢缩小版。
如果您有兴趣，我在here 发布了一个后续问题...

【解决方案2】：

这是一个更新的 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; }

如果不是，我们移除高亮类（重置）

【讨论】：

【解决方案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;
}

【讨论】：