Question

是否可以在Safari / Firefox / Chrome中使用Javascript来搜索特定div容器中的给定文本字符串。我知道您可以使用window.find(str)搜索整个页面，但是是否可以将搜索区域限制为div？

谢谢！

Answer 1

一旦您查找div（您可以通过document.getElementById或任何其他DOM功能various specs here执行此操作），您就可以使用textContent或{ {3}}找到div的文字。然后，您可以使用indexOf来查找该字符串。

或者，在较低级别，您可以使用递归函数来搜索窗口中的所有文本节点，其中声音比它复杂得多。基本上，从您的目标div（innerText）开始，您可以遍历其Element并搜索其nodeValue字符串（如果它们是childNodes s）或递归到他们（如果他们是Element）。

诀窍是天真的版本无法在此标记中找到"foo"：

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

...因为两个Text节点中都没有nodeValue个"foo"（其中一个有"fo"，另一个"o" }）。

Answer 2

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

首先，搜索从用户上次点击的位置开始。因此，要获得正确的上下文，可以强制单击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之外，你可以将它设置回来。

希望这有帮助！〜techdude

Answer 3

根据其他答案，您将无法使用window.find功能。好消息是，您不必完全自己编程，因为现在有一个名为rangy的库可以帮助您解决这个问题。因此，由于代码本身有点过多而无法将粘贴复制到此答案中，因此我将仅参考可以found here的rangy库的代码示例。查看您将找到的代码

 searchScopeRange.selectNodeContents(document.body);

你可以用

代替

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

仅在内容div中进行搜索。

Answer 4

var elements = [];
$(document).find("*").filter(function () {
  if($(this).text().contains(yourText))
    elements.push($(this));
});
console.log(elements);

我没有尝试过，但根据jQuery文档，它应该可以工作。

Answer 5

以下是我使用jquery的方式：

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

它将返回true或false

Answer 6

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

这里是：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 希望还不算太晚：）

Answer 7

您可以使用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

Answer 8

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

如何将Javascript window.find限制为特定的DIV？

8 个答案: