Find Next Occurrence in Search

[JBorges]

Hello.

I have this JS code which I found on the web. It searches for a text string the user inserts into a textfield. I would like to be able to tap a button that goes either to next or previous occurrence. Setting up the GUI is not a problem, it's just how to code the next/previous function in JS. (I'm developing for iOS using a UIWebView, but that shouldn't be an issue here, since the code revolves around JS):

function HighlightAllOccurencesOfStringForElement(element,keyword) {
    if (element) {
        if (element.nodeType == 3) { // Text node
            while (true) {
                var value = element.nodeValue;  // Search for keyword in text node
                var idx = value.toLowerCase().indexOf(keyword);
                
                if (idx < 0) break;             // not found, abort
                
                var span = document.createElement("span");
                var text = document.createTextNode(value.substr(idx,keyword.length));
                span.appendChild(text);
                span.setAttribute("class","MyAppHighlight");
                text = document.createTextNode(value.substr(idx+keyword.length));
                element.deleteData(idx, value.length - idx);
                var next = element.nextSibling;
                element.parentNode.insertBefore(span, next);
                element.parentNode.insertBefore(text, next);
                element = text;
                span.scrollIntoView(); // THIS SCROLLS TO THE FIRST SEARCH OCCURRENCE
                span.style.backgroundColor="yellow"; // must set the CSS style after scrolling to first search instance
                span.style.color="black";
                SearchResultCount++;	// update the counter

            }
        } else if (element.nodeType == 1) { // Element node
            if (element.style.display != "none" && element.nodeName.toLowerCase() != 'select') {
                for (var i=element.childNodes.length-1; i>=0; i--) {
                    HighlightAllOccurencesOfStringForElement(element.childNodes[i],keyword);
                }
            }
        }
    }
}

 

[jpadie]

not tested this but it might work

var currentHighlightedSpan;

function scrollToNext(){
  var spans = document.getElementsByClassName('MyAppHighlight');
  if (spans[currentHighlightedSpan + 1]){
    spans[currentHighlightedSpan + 1].scrollIntoView();
    currentHighlightedSpan++;
  }
}

function scrollToPrev(){
  var spans = document.getElementsByClassName('MyAppHighlight');
  if (spans[currentHighlightedSpan 1 1]){
    spans[currentHighlightedSpan - 1].scrollIntoView();
    currentHighlightedSpan--;
  }
}

you might want to add some checks that dis/enables the buttons depending on whether you are at the last/first highlighted search term.

 

[JBorges]

Thank you jpadie.

I coulnd't get it to work though, in the meantime I solved it this way:

Add this line

a.push(span);

before this line

SearchResultCount++;

Then in objective c add this a method to call JS:

currentPosition = currentPosition - 1; // currentPosition is an integer 
NSString *nextScrollPosition = [NSString stringWithFormat:@"a[%d].scrollIntoView()", currentPosition];
[webView stringByEvaluatingJavaScriptFromString:nextScrollPosition];

I realize that this is not an entirely pure JS entry, but I hope it can help others with similar issues, or to adapt the code to their programming language.

 

[jpadie]

this line

if (spans[currentHighlightedSpan 1 1]){

had a typo. the first 1 should have been a minus sign.

 

[JBorges]

Thanks jpadie.

I saw that and corrected but I still can't get it to work. As mentioned I have figured out how to do it and it works very well. Thank you for taking the time to reply.

 

[jpadie]

Just unravel your objective c into JavaScript.