javascript window.find case-sensitive search within specific div

Question

I have a button that uses a function with window.find to search/highlight a word.

The issue I am facing is that I am unable to make this search case-sensitive. And if possible I would like to make the search within a specific div.

http://jsfiddle.net/qhaofxyr/

var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', function() {findString ('Text',1,0,0,0,0,0)});

function findString (str) {
    if (parseInt(navigator.appVersion)<4) return;
    var strFound;
    if (window.find) {

        strFound=self.find(str);
        if (!strFound) {
            strFound=self.find(str,0,1);
            while (self.find(str,0,1)) continue;
        }
    }
    if (!strFound) console.log ("String '"+str+"' not found!")
        return;
}

<button id="myButtonId">Find</button>

<div id="myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>

<div id="myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>

[`window.find`](https://developer.mozilla.org/en-US/docs/Web/API/Window/find) is a non-standard feature, so it's hard to say how to make it work, as it's not even guaranteed to be around, much less guaranteed to behave the same way for every user. — VLAZ, Jan 29 '19 at 07:38
Thanks for pointing this out, I wasn't aware of that and it is good to know. — Joe Berg, Jan 30 '19 at 22:00

Alen.Toma · Accepted Answer · 2019-01-31T03:44:40.083

1

Update window.find has a property aCaseSensitive which i was aple to find in

https://developer.mozilla.org/en-US/docs/Web/API/Window/find

So here i updated your code and used window.find(str, true) where boolean indicate aCaseSensitive search operation.

var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', function() { findString ('Text',1,0,0,0,0,0)});

function findString (str) {
    if (parseInt(navigator.appVersion)<4) return;
    var strFound;
    if (window.find) {

        strFound=self.find(str, true);
        if (!strFound) {
            strFound=self.find(str,true,1);
            while (self.find(str,true,1)) continue;
        }
    }
}

<button id="myButtonId">Find</button>

<div id="myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>

<div id="myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>

edited Jan 31 '19 at 03:44

answered Jan 29 '19 at 08:31

Alen.Toma

4,684
2
14
31

Thanks Alen, this is also how I imagined to do it at the start, but since I need to avoid messing with the page too much, replacing the element won't be the right approach for me. The divs on the page that I will search through only contains a few words (sometimes a single word) and all are different, so if window.find is a bad choice, perhaps it would be possible to find the div containing the word and then select the element(div), so the word/words of the div is selected e.g. "highlighted". Would you know how to achieve this? – Joe Berg Jan 30 '19 at 21:59
Ok, it seems that window.find can be case-sensitive. i updated my answer, have a look. – Alen.Toma Jan 31 '19 at 03:45
Thanks a lot! I marked as answer. Seems to be working fine now. :) – Joe Berg Jan 31 '19 at 06:41
I also found something else that looks promising, and might be a better option than to use window.find (based on comment by vlaz): https://stackoverflow.com/a/987376 – Joe Berg Jan 31 '19 at 06:46
Yah getSelection, know about it. it may be a good solution too :) – Alen.Toma Jan 31 '19 at 07:11

score 0 · Answer 2 · answered Jan 31 '19 at 08:59

I found this solution for getSelection (stackoverflow.com/a/987376) and made an example below if anyone else needs it.

It will select the tag containing the keyword.

var myButton = document.getElementById('myButtonId');
myButton.addEventListener('click', () => selectText());
    
function selectText(node) {
    var pSelect = document.querySelectorAll('p'), i;
    for (i = 0; i < pSelect.length; ++i) {
         if(pSelect[i].textContent.match('tExt')){
         var node = pSelect[i];
         }
    }

    if (window.getSelection) {
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        console.warn("Unsupported browser.");
    }
}

<h3>Button 'Find' selects the 'p' tag containing 'tExt'.</h3>

<button id="myButtonId">Find</button>

<div id="myDivId1">
<p>
This is some text in a paragraph.<br>
It has Text placed in my first div.
</p>
</div>

<div id="myDivId2">
<p>
This is some texT in a paragraph.<br>
It has tExt placed in my second div.
</p>
</div>

javascript window.find case-sensitive search within specific div

2 Answers2