Find Search Occurrences That Includes Special Characters

[JBorges]

Hello.

The Javascript code below searches for any word in an HTML file entered into a textfield. Now, the text that needs to be searched through contains special characters like the apostrophe and dot in this sample text: "And the tribe of Zeb′u·lun."

If I type Zebulun with no special characters in my textfield the search function cannot find it. How can I adopt my JS code to include those special characters?

   var SearchResultCount = 0;
    var a = new Array();
    var oneTime = false;

    // helper function, recursively searches in elements and their child nodes
    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();
                    span.style.background= "-webkit-linear-gradient(top, #FAE309, #FFF7AA)"; 
                    span.style.fontWeight = "bold";
                    span.style.padding = "2px";
                    span.style.borderRadius = "5px";
                    span.style.boxShadow = "0px 0px 2px black";
                    a.push(span); // SET THIS CODE HERE
                    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);
                    }
                }
            }
        }
    }

// the main entry point to start the search
function HighlightAllOccurencesOfString(keyword) {
    RemoveAllHighlights();
    HighlightAllOccurencesOfStringForElement(document.body, keyword.toLowerCase());
}

 

[jpadie]

probably the easiest way is to remove all special characters and replace with a zero width string (e.g. ''). then do a comparison. Alternatives might be to use soundex with leventshein difference. I am not sure whether there are javascript libraries available for that - never had to look at it myself.

to replace characters use a regex that lists all the characters you want to remove. You might also do the same for diacritics as this will also break searching.