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

Question

This is my search function, which works fine for my purposes.

    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;
    };

This is the div I would like to have my search function ignore, if possible:

<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>

My reason for wanting to do this is, whenever someone attempts to search the page for something rendered in my marquee div, the page locks up and becomes unresponsive, till the tab is closed and the page is reopened. So I'm assuming if I somehow told the search function to ignore that particular div, the page would no longer crash, it would just return the response, that "String not found". If anyone has some advice on how I can go about fixing this, it would be much appreciated. Thank you.

This is how I'm rendering my marquee:

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

Check this out if it helps - https://stackoverflow.com/questions/15142485/how-to-limit-javascripts-window-find-to-a-particular-div — Tejeshree, May 08 '21 at 19:02
Could you just remove the innerHTML of the marquee, do the find then put it backagain? — A Haworth, May 08 '21 at 20:26
I'll put it in an answer so you can see the code, but I am uncertain about its effect in the general situation. — A Haworth, May 08 '21 at 20:31
@AHaworth I'll go ahead and add the Marquee code to my question, so you can see how I'm rendering that. — Anthony Michael Kourmoulakis, May 08 '21 at 20:33
Hmm, I don't know enough about how react renders your code to HTML. — A Haworth, May 08 '21 at 20:59
Yeah, I tried placing the code you shared into my Search script, and the page still locked up when attempting to search a word found in the marquee. — Anthony Michael Kourmoulakis, May 08 '21 at 21:10

score 1 · Accepted Answer · edited May 08 '21 at 20:56

1

A somewhat hacky idea, but maybe it will work in your situation, would be to remove the innerHTML of the div, do the find then put the innerHTML back again. It may depend on the exact structure whether this is safe to do.

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

It would be preferable of course to find out why the search on a string in the marquee locks things up and cure that.

edited May 08 '21 at 20:56

Anthony Michael Kourmoulakis

17
7

answered May 08 '21 at 20:18

A Haworth

30,908
4
11
14

Where you are calling findString. – A Haworth May 08 '21 at 20:58
Oh my gosh, I figured it out, thank you! It works now! – Anthony Michael Kourmoulakis May 08 '21 at 21:27

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

1 Answers1