谷歌铬-如何限制Javascript's window.查找特定DIV

一旦查找了div(可以通过document.getElementById或任何其他DOM函数，这里有各种规格(，就可以使用textContent或innerText来查找该div的文本。然后您可以使用indexOf来查找其中的字符串。

或者，在较低级别，您可以使用递归函数搜索窗口中的所有文本节点，听起来比实际情况复杂得多。基本上，从目标div(即Element(开始，您可以循环遍历其childNodes并搜索其nodeValue字符串(如果它们是Texts(或递归到它们中(如果它们为Elements(。

诀窍是，一个天真的版本将无法在这个标记中找到"foo"：

<p><span>fo</span>o</p>

因为那里的两个Text节点都不具有其中具有"foo"的nodeValue(其中一个节点具有"fo"、另一个节点"o"(。

根据您要做的事情，有一种有趣的方法可以做到这一点(确实需要一些工作(。

首先，搜索从用户上次单击的位置开始。因此，为了获得正确的上下文，你可以强制点击div。这将把内部指针放在div的开头。

然后，您可以像往常一样使用window.find来查找元素。它将突出显示并移向找到的下一个项目。您可以创建自己的对话框，处理find返回的true或false，以及检查位置。例如，您可以保存当前滚动位置，如果下一个返回的结果在div之外，则恢复滚动。此外，如果它返回false，那么您可以说没有找到任何结果。

您还可以显示默认的搜索框。在这种情况下，您可以指定起始位置，但不能指定结束位置，因为您失去了控制。

一些示例代码可以帮助您入门。如果有足够的兴趣，我也可以试着做一个jsfiddle。

语法：

window.find(aStringToFind, bCaseSensitive, bBackwards, bWrapAround, bWholeWord, bSearchInFrames, bShowDialog);

例如，要开始在myDiv内部搜索，请尝试

document.getElementById("myDiv").click(); //Place cursor at the beginning
window.find("t", 0, 0, 0, 0, 0, 0); //Go to the next location, no wrap around

您可以设置一个模糊(失去焦点(事件处理程序，让您知道何时离开div，以便停止搜索。

要保存当前滚动位置，请使用document.body.scrollTop。如果它试图跳出div.，则可以将其设置回原来的位置

希望这能有所帮助！~技术型

根据其他答案，您将无法为此使用window.find功能。好消息是，你不必完全自己编程，因为现在有一个名为rangy的库，它在这方面有很大帮助。因此，由于代码本身有点太多，无法复制粘贴到这个答案中，我只参考可以在这里找到的rangy库的代码示例。查看代码，你会发现

 searchScopeRange.selectNodeContents(document.body);

你可以用代替

 searchScopeRange.selectNodeContents(document.getElementById("content"));

只在内容分区中具体搜索。

如果你还在找东西，我想我找到了一个很好的解决方案；

它在这里：https://www.aspforums.net/Threads/211834/How-to-search-text-on-web-page-similar-to-CTRL-F-using-jQuery/

我正在删除jQuery(wip(：codepen.io/eloiletagant/pen/MBgOPB希望不要太晚：(

您可以使用Window.find()来搜索页面中出现的所有内容，使用Node.contains()来过滤不合适的搜索结果
下面是一个如何查找和突出显示特定元素中字符串的所有出现的示例：

var searchText = "something"
var container = document.getElementById("specificContainer");
// selection object
var sel = window.getSelection()
sel.collapse(document.body, 0)
// array to store ranges found
var ranges = []
// find all occurrences in a page
while (window.find(searchText)) {
    // filter out search results outside of a specific element
    if (container.contains(sel.anchorNode)){
        ranges.push(sel.getRangeAt(sel.rangeCount - 1))
    }
}   
// remove selection
sel.collapseToEnd()
// Handle ranges outside of the while loop above.
// Otherwise Safari freezes for some reason (Chrome doesn't).
if (ranges.length == 0){
    alert("No results for '" + searchText + "'")
 } else {
    for (var i = 0; i < ranges.length; i++){
        var range = ranges[i]
        if (range.startContainer == range.endContainer){
            // Range includes just one node
            highlight(i, range)
        } else {
            // More complex case: range includes multiple nodes
            // Get all the text nodes in the range
            var textNodes = getTextNodesInRange(
                                range.commonAncestorContainer,
                                range.startContainer,
                                range.endContainer) 
            var startOffset = range.startOffset
            var endOffset = range.endOffset
            for (var j = 0; j < textNodes.length; j++){
                var node = textNodes[j]
                range.setStart(node, j==0? startOffset : 0)
                range.setEnd(node, j==textNodes.length-1? 
                                       endOffset : node.nodeValue.length)
                highlight(i, range)
            }
        }
    }
}
function highlight(index, range){
    var newNode = document.createElement("span")
    // TODO: define CSS class "highlight"
    // or use <code>newNode.style.backgroundColor = "yellow"</code> instead
    newNode.className = "highlight"
    range.surroundContents(newNode)
    // scroll to the first match found
    if (index == 0){
        newNode.scrollIntoView()
    }
}
function getTextNodesInRange(rootNode, firstNode, lastNode){
    var nodes = []
    var startNode = null, endNode = lastNode
    var walker = document.createTreeWalker(
            rootNode,
            // search for text nodes
            NodeFilter.SHOW_TEXT,
            // Logic to determine whether to accept, reject or skip node.
            // In this case, only accept nodes that are between
            // <code>firstNode</code> and <code>lastNode</code>
            {
                acceptNode: function(node) {
                    if (!startNode) {
                        if (firstNode == node){
                            startNode = node
                            return NodeFilter.FILTER_ACCEPT
                        }
                        return NodeFilter.FILTER_REJECT
                    }
                    if (endNode) {
                        if (lastNode == node){
                            endNode = null
                        }
                        return NodeFilter.FILTER_ACCEPT
                    }
                    return NodeFilter.FILTER_REJECT
                 }
            },
            false
        )
    while(walker.nextNode()){
        nodes.push(walker.currentNode);
    }
    return nodes;
}

有关Range对象，请参见https://developer.mozilla.org/en-US/docs/Web/API/Range.
有关TreeWalker对象，请参见https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

以下是我如何使用jquery：

var result = $('#elementid').text().indexOf('yourtext') > -1

它将返回true或false

也许您正在尝试不使用jquery。。。但如果没有，您可以使用这个$('div:contains(whatyouarelookingfor)')——唯一的问题是它可以返回父元素，这些父元素也包含匹配的子div。