I conducted an experiment similar to this:
<div onclick="clickfunc(this)"> highlightME </div>
<div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div>
<script language=javascript>
function clickfunc(obj) {
var t = $(obj).text();
doSearch(t);
}
function doSearch(text) {
if (window.find && window.getSelection) {
document.designMode = "on";
// var sel = window.getSelection();
// console.log(sel);
// sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, "yellow");
//sel.collapseToEnd();
}
document.designMode = "off";
}
else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, "yellow");
textRange.collapse(false);
}
}
}
</script>
Upon clicking the 'highlightME' text, all instances of it on the page are highlighted. However, the highlighting remains visible at all times.
I am looking for a way to remove the highlighting by clicking the text again, pressing ESC, or using any other method available.
Any solution involving changes in JavaScript, CSS, or HTML is welcome.
~ thank you.