Created
November 9, 2018 23:09
-
-
Save EdmundLeex/a014b7e1dc2d7989e953b329a87fe9d3 to your computer and use it in GitHub Desktop.
Finding text on html page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var all = document.getElementsByTagName("*"); | |
var body; | |
for (var i = 0; i < all.length; i++) { | |
if (all[i].tagName === 'BODY') { body = all[i]; break; } | |
} | |
function highlightInElement(element, text){ | |
var elementHtml = element.innerHTML; | |
var tags = []; | |
var tagLocations= []; | |
var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/; | |
//Strip the tags from the elementHtml and keep track of them | |
var htmlTag; | |
while(htmlTag = elementHtml.match(htmlTagRegEx)){ | |
tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx); | |
tags[tags.length] = htmlTag; | |
elementHtml = elementHtml.replace(htmlTag, ''); | |
} | |
//Search for the text in the stripped html | |
// var textLocation = elementHtml.search(text); | |
var textLocations = getIndicesOf(elementHtml, text); | |
textLocations.forEach((textLocation) => { | |
var highlightHTMLStart = '<span class="edmund-highlight">'; | |
var highlightHTMLEnd = '</span>'; | |
elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd); | |
//plug back in the HTML tags | |
var textEndLocation = textLocation + text.length; | |
for(i=tagLocations.length-1; i>=0; i--){ | |
var location = tagLocations[i]; | |
if(location > textEndLocation){ | |
location += highlightHTMLStart.length + highlightHTMLEnd.length; | |
} else if(location > textLocation){ | |
location += highlightHTMLStart.length; | |
} | |
elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location); | |
} | |
}); | |
// if(textLocation){ | |
// //Add the highlight | |
// var highlightHTMLStart = '<span class="highlight">'; | |
// var highlightHTMLEnd = '</span>'; | |
// elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd); | |
// | |
// //plug back in the HTML tags | |
// var textEndLocation = textLocation + text.length; | |
// for(i=tagLocations.length-1; i>=0; i--){ | |
// var location = tagLocations[i]; | |
// if(location > textEndLocation){ | |
// location += highlightHTMLStart.length + highlightHTMLEnd.length; | |
// } else if(location > textLocation){ | |
// location += highlightHTMLStart.length; | |
// } | |
// elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location); | |
// } | |
// } | |
//Update the innerHTML of the element | |
// return elementHtml; | |
element.innerHTML = elementHtml; | |
} | |
function getIndicesOf(searchStr, str, caseSensitive) { | |
var searchStrLen = searchStr.length; | |
if (searchStrLen == 0) { | |
return []; | |
} | |
var startIndex = 0, index, indices = []; | |
if (!caseSensitive) { | |
str = str.toLowerCase(); | |
searchStr = searchStr.toLowerCase(); | |
} | |
while ((index = str.indexOf(searchStr, startIndex)) > -1) { | |
indices.push(index); | |
startIndex = index + searchStrLen; | |
} | |
return indices; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment