11

Safari/Firefox/Chrome で Javascript を使用して、特定の div コンテナーで特定のテキスト文字列を検索することは可能ですか。ページ全体を検索するために使用できることは知っていますがwindow.find(str)、検索領域を div のみに制限することは可能ですか?

ありがとう！

4

8 に答える 8

7

を調べたら(または 他の DOM 関数のいずれかをdiv介して行うことができます。さまざまな仕様はこちら)、またはを使用してそのテキストを見つけることができます。次に、その中の文字列を見つけるために使用できます。document.getElementByIdtextContentinnerTextdivindexOf

別の方法として、より低いレベルでは、再帰関数を使用してウィンドウ内のすべてのテキスト ノードを検索することができますが、これは実際よりもはるかに複雑に聞こえます。基本的に、ターゲットdiv( であるElement) から始めて、そのターゲットをループして文字列childNodesを検索するか (それらがの場合)、それらに再帰することができます (それらがの場合)。nodeValueTextElement

トリックは、素朴なバージョンが"foo"このマークアップで見つけられないということです:

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

...Textそこにある 2 つのノードのどちらにもnodeValuewith"foo"が含まれていないため (一方には が"fo"あり、もう一方には があります"o")。

于 2013-02-28T18:06:34.740 に答える
1

window.find他の回答によると、この機能を使用することはできません。幸いなことに、これを完全に自分でプログラムする必要はありません。最近では、これに大いに役立つ rangy というライブラリがあるためです。そのため、コード自体をコピーしてこの回答に貼り付けるには多すぎるため、ここで見つけることができる rangy ライブラリのコード例を参照します。コードを見ると、

 searchScopeRange.selectNodeContents(document.body);

あなたが置き換えることができるもの

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

コンテンツ div のみを具体的に検索するには。

于 2014-08-28T17:19:21.363 に答える
1

あなたがまだ何かを探しているなら、私はかなり良い解決策を見つけたと思います。

ここにあります：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 手遅れではないことを願っています:)

于 2018-07-10T07:48:11.293 に答える
0 
var elements = [];
$(document).find("*").filter(function () {
  if($(this).text().contains(yourText))
    elements.push($(this));
});
console.log(elements);

私はそれを試しませんでしたが、jQueryのドキュメントによると、うまくいくはずです。

于 2014-09-03T06:19:58.343 に答える
0

を利用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を参照してください。オブジェクト
については、 https://developer.mozilla.org/en-US/docs/Web/API/TreeWalkerを参照してください。TreeWalker

于 2019-09-24T12:41:15.043 に答える
-2

たぶんあなたはjqueryを使わないようにしようとしています...しかしそうでないなら、これを使うことができます$('div:contains(whatyouarelookingfor)')唯一の落とし穴は、一致する子divも含む親要素を返すことができるということです。

于 2013-02-28T18:47:08.747 に答える