jsTextElementSearch

With regular expressions and text ranging you can locate and highlight all instances or occurances of a string within another string such as a text box which can be useful as a visual assistant or, with a little modification, to replace a string with something different. See the demo below and the source code. If you are interested in replacing string matches, please see "jsFilterTxtReplace" from the main javascript page.

Source Code:

<script language="javascript">
<!--
cPos = new Array();
var cPosIndex = -1;
var txtLastValue = "";
function txtFind(targetTxtField, matchTxt) {
if (matchTxt.length > 0) {
			  if (txtLastValue != matchTxt) { cPos = []; cPosIndex = -1; txtLastValue = matchTxt; }
			  if (cPosIndex == -1) { txtIndexMatches(targetTxtField, matchTxt); }
			  else { txtMatchHighlight(targetTxtField, matchTxt); }
			 }
}
function txtIndexMatches(targetTxtField, matchTxt) {
tmpArray = new Array(); tmpArray2 = new Array();
try {
     var inputString = matchTxt;
     tmpArray = document.getElementById(targetTxtField).value.match(new RegExp(inputString, "gi"));
     var handleData = document.getElementById(targetTxtField).value;
     for (x = 0; x < tmpArray.length; x++) {
					    tmpArray2[tmpArray2.length] = handleData.indexOf(inputString);
					    handleData = handleData.substr(tmpArray2[tmpArray2.length - 1] + inputString.length, handleData.length);
					    if (x == 0) { cPos[cPos.length] = tmpArray2[x]; }
					    else { cPos[cPos.length] = cPos[cPos.length - 1] + tmpArray2[x] + inputString.length; }
					   }
     if (cPos.length > 0) {
     			   /* Highlight first or only match */
			   cPosIndex = 0;
     			   txtMatchHighlight(targetTxtField, matchTxt);
			  }
    }
catch (onerror) { /* No string match */ }
}
function txtMatchHighlight(targetTxtField, matchTxt) {
var inputString = matchTxt;
var oRange; var iStart = 0, iEnd = 0;
if (cPosIndex > cPos.length - 1) { cPosIndex = 0; }
iStart = cPos[cPosIndex]; iEnd = cPos[cPosIndex] + inputString.length; cPosIndex = cPosIndex + 1;
if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
						    	     oRange = document.getElementById(targetTxtField).createTextRange();
						    	     oRange.moveStart("character", iStart);
						    	     oRange.moveEnd("character", iEnd - parseInt(document.getElementById(targetTxtField).value.length));
						   	    }
else { oRange = document.getElementById(targetTxtField).setSelectionRange(iStart, iEnd); }
oRange.select(); document.getElementById(targetTxtField).focus();
}
//-->
</script>

HTML Code:

<textarea name="source" id="source" cols="100" rows="5">This text box contains text.  In order to find one or more instances of text, enter the text to find in the input box below.  Click on the button multiple times to cycle through all matches that were found.</textarea>
<br />
<input type="text" name="searchTxt" id="searchTxt" size="20" value="text" />
<input type="button" onmouseup="txtFind('source', document.getElementById('searchTxt').value);" value="Find Text" />