0

我在这里有一个示例 jsfiddle 。

你会看到我创建了几个 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更合适地完成吗？

4

3 回答 3

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; }

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

于 2013-08-28T21:14:31.360 回答
2

我在这里叉了你的小提琴。我添加了一行 CSS（一个新类：highlight）并将 doSearch() 函数缩小到这两行 jQuery 中：

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

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

于 2013-08-28T21:15:29.817 回答
2

这是一个纯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;
}
于 2013-08-28T21:22:32.103 回答