在页面上使用文本字符串搜索功能，有没有办法让搜索忽略特定的 div？

Posted 2023-05-09

【中文标题】在页面上使用文本字符串搜索功能，有没有办法让搜索忽略特定的 div？

【英文标题】：Using a text string search function on a page, is there a way to have the search ignore a specific div?

【发布时间】：2021-07-30 17:01:43

【问题描述】：

这是我的搜索功能，非常适合我的目的。

    var TRange = null;

    function findString(str) 
    if (parseInt(navigator.appVersion) < 4) return;
    var strFound;
    if (window.find) 
        // CODE FOR BROWSERS THAT SUPPORT window.find
        strFound = self.find(str);
        if (strFound && self.getSelection && !self.getSelection().anchorNode) 
            strFound = self.find(str)
        
        if (!strFound) 
            strFound = self.find(str, 0, 1)
            while (self.find(str, 0, 1)) continue
        
     else if (navigator.appName.indexOf("Microsoft") != -1) 
        // EXPLORER-SPECIFIC CODE        
        if (TRange != null) 
            TRange.collapse(false)
            strFound = TRange.findText(str)
            if (strFound) TRange.select()
        
        if (TRange == null || strFound == 0) 
            TRange = self.document.body.createTextRange()
            strFound = TRange.findText(str)
            if (strFound) TRange.select()
        
     else if (navigator.appName == "Opera") 
        alert("Opera browsers not supported, sorry...")
        return;
    
    if (!strFound) alert("String '" + str + "' not found!")
        return;
    ;

    document.getElementById('f1').onsubmit = function() 
    const marquee = document.querySelector('#marquee');
    let innerhtml = marquee.innerHTML;
    marquee.innerHTML = '';
    let found = findString(this.t1.value);
    marquee.innerHTML  = innerHTML;
    return false;
    ;

如果可能的话，这是我希望我的搜索功能忽略的 div：

<div style="background-color: lightyellow; height:20px; border: 1.5px; border-style: groove solid solid groove; padding-top: 1px; margin-right: 10px; width: 700px;" class="noselect" id="marquee"></div>

我想要这样做的原因是，每当有人尝试搜索页面以查找在我的选取框 div 中呈现的内容时，页面就会锁定并变得无响应，直到选项卡关闭并重新打开页面。所以我假设如果我以某种方式告诉搜索函数忽略那个特定的 div，页面将不再崩溃，它只会返回响应，即“找不到字符串”。如果有人对我如何解决此问题有一些建议，将不胜感激。谢谢。

这就是我渲染选取框的方式：

"use strict";

function tick() 
  const element = /*#__PURE__*/React.createElement("marquee", 
    behavior: "scroll",
    bgcolor: "lightyellow",
    loop: "-1",
    width: "700px"
  , " ", /*#__PURE__*/React.createElement("font", 
    color: "blue"
  , " ", /*#__PURE__*/React.createElement("strong", null, "Today is: ", new Date().toDateString(), " and the current time is: ", new Date().toLocaleTimeString(), " "), " "), " ");
  ReactDOM.render(element, document.getElementById("marquee"));


setInterval(tick, 1000);

【问题讨论】：

看看这个是否有帮助 - ***.com/questions/15142485/…

你能不能把选框的innerHTML去掉，找到然后再放回去？

@AHaworth 你是什么意思？

我会把它放在一个答案中，这样你就可以看到代码，但我不确定它在一般情况下的效果。

@AHaworth 我会继续将选取框代码添加到我的问题中，这样您就可以看到我是如何呈现它的。

【参考方案1】：

一个有点老套的想法，但也许它会在你的情况下工作，将删除 div 的 innerHTML，执行查找然后将 innerHTML 重新放回去。这样做是否安全可能取决于确切的结构。

const marquee = document.querySelector('#marquee');
let innerHTML = marquee.innerHTML;
marquee.innerHTML = '';
let found = findString('whatever');
marquee.innerHTML  = innerHTML;

当然最好找出在选框中搜索字符串的原因并解决这个问题。

【讨论】：

你在哪里调用 findString。

天哪，我想通了，谢谢！现在可以了！