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

Question

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

    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，页面将不再崩溃，它只会 return 响应，即“未找到字符串”。如果有人对我如何解决这个问题有一些建议，我将不胜感激。谢谢。

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

"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);

Answer 1

一个有点古怪的想法，但也许它会在您的情况下起作用，那就是删除 div 的 innerHTML，进行查找，然后再将 innerHTML 放回去。这样做是否安全可能取决于确切的结构。

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

当然最好找出为什么在字幕中搜索字符串会锁定并解决这个问题。

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

Using a text string search function on a page, is there a way to have the search ignore a specific div?

html

javascript

search

jquery

dom