amoilanen/text_search_and_highlighting.html

## text_search_and_highlighting.html
<html>
<header>
<style type="text/css">
body
{
background-color:#FAEBD7;
}
button
{
width:70;
height:30;
}
.found {
background-color:#FFFF00;
}
</style>
<script type="text/javascript">
function addEventListeners() {
  var textSpan = document.getElementById("textToSearch");
  var searchButton = document.getElementById("searchButton");
  var clearButton = document.getElementById("clearButton");

  searchButton.addEventListener("click", searchText, false);
  function searchText() {
    clearFound();
    var searchString = document.getElementById("searchString").value;
    if (searchString.length == 0) {
      return;
    }

    textSpan.innerHTML = textSpan.innerHTML.replace(new RegExp(searchString, 'g'), "<span class=\"found\">" + searchString + "</span>");
  }

  clearButton.addEventListener("click", clearFound, false);
  function clearFound() {
    textSpan.innerHTML = textSpan.innerHTML.replace(/<span class="found">/g, "");
    textSpan.innerHTML = textSpan.innerHTML.replace(/<\/span>/g, "");
  }
}

window.addEventListener("load", addEventListeners, false);
</script>
</header>
<body>
<h1>Text Search and Highlighting Example</h1>
<input id="searchString" type="text" />
<button id="searchButton" type="button">Search</button>
<button id="clearButton" type="button">Clear</button>
<br/>
<br/>
<!-- Extract from "The Adventures of Sherlock Holmes by Sir Arthur Conan Doyle" http://www.gutenberg.org/ebooks/1661 -->
<span id="textToSearch">
The road in which we found ourselves as we turned round the corner from the retired Saxe-Coburg Square presented as great a contrast to it as the front of a picture does to the back. It was one of the main arteries which conveyed the traffic of the City to the north and west. The roadway was blocked with the immense stream of commerce flowing in a double tide inward and outward, while the footpaths were black with the hurrying swarm of pedestrians. It was difficult to realise as we looked at the line of fine shops and stately business premises that they really abutted on the other side upon the faded and stagnant square which we had just quitted.
“Let me see,” said Holmes, standing at the corner and glancing along the line, “I should like just to remember the order of the houses here. It is a hobby of mine to have an exact knowledge of London. There is Mortimer’s, the tobacconist, the little newspaper shop, the Coburg branch of the City and Suburban Bank, the Vegetarian Restaurant, and McFarlane’s carriage-building depot. That carries us right on to the other block. And now, Doctor, we’ve done our work, so it’s time we had some play. A sandwich and a cup of coffee, and then off to violin-land, where all is sweetness and delicacy and harmony, and there are no red-headed clients to vex us with their conundrums.”
My friend was an enthusiastic musician, being himself not only a very capable performer but a composer of no ordinary merit. All the afternoon he sat in the stalls wrapped in the most perfect happiness, gently waving his long, thin fingers in time to the music, while his gently smiling face and his languid, dreamy eyes were as unlike those of Holmes the sleuth-hound, Holmes the relentless, keen-witted, ready-handed criminal agent, as it was possible to conceive. In his singular character the dual nature alternately asserted itself, and his extreme exactness and astuteness represented, as I have often thought, the reaction against the poetic and contemplative mood which occasionally predominated in him. The swing of his nature took him from extreme languor to devouring energy; and, as I knew well, he was never so truly formidable as when, for days on end, he had been lounging in his armchair amid his improvisations and his black-letter editions. Then it was that the lust of the chase would suddenly come upon him, and that his brilliant reasoning power would rise to the level of intuition, until those who were unacquainted with his methods would look askance at him as on a man whose knowledge was not that of other mortals. When I saw him that afternoon so enwrapped in the music at St. James’s Hall I felt that an evil time might be coming upon those whom he had set himself to hunt down.
</span>
</body>
</html>
	<html>
	<header>
	<style type="text/css">
	body
	{
	background-color:#FAEBD7;
	}
	button
	{
	width:70;
	height:30;
	}
	.found {
	background-color:#FFFF00;
	}
	</style>
	<script type="text/javascript">
	function addEventListeners() {
	var textSpan = document.getElementById("textToSearch");
	var searchButton = document.getElementById("searchButton");
	var clearButton = document.getElementById("clearButton");

	searchButton.addEventListener("click", searchText, false);
	function searchText() {
	clearFound();
	var searchString = document.getElementById("searchString").value;
	if (searchString.length == 0) {
	return;
	}

	textSpan.innerHTML = textSpan.innerHTML.replace(new RegExp(searchString, 'g'), "<span class=\"found\">" + searchString + "</span>");
	}

	clearButton.addEventListener("click", clearFound, false);
	function clearFound() {
	textSpan.innerHTML = textSpan.innerHTML.replace(/<span class="found">/g, "");
	textSpan.innerHTML = textSpan.innerHTML.replace(/<\/span>/g, "");
	}
	}

	window.addEventListener("load", addEventListeners, false);
	</script>
	</header>
	<body>
	<h1>Text Search and Highlighting Example</h1>
	<input id="searchString" type="text" />
	<button id="searchButton" type="button">Search</button>
	<button id="clearButton" type="button">Clear</button>
	<br/>
	<br/>
	<!-- Extract from "The Adventures of Sherlock Holmes by Sir Arthur Conan Doyle" http://www.gutenberg.org/ebooks/1661 -->
	<span id="textToSearch">
	The road in which we found ourselves as we turned round the corner from the retired Saxe-Coburg Square presented as great a contrast to it as the front of a picture does to the back. It was one of the main arteries which conveyed the traffic of the City to the north and west. The roadway was blocked with the immense stream of commerce flowing in a double tide inward and outward, while the footpaths were black with the hurrying swarm of pedestrians. It was difficult to realise as we looked at the line of fine shops and stately business premises that they really abutted on the other side upon the faded and stagnant square which we had just quitted.
	“Let me see,” said Holmes, standing at the corner and glancing along the line, “I should like just to remember the order of the houses here. It is a hobby of mine to have an exact knowledge of London. There is Mortimer’s, the tobacconist, the little newspaper shop, the Coburg branch of the City and Suburban Bank, the Vegetarian Restaurant, and McFarlane’s carriage-building depot. That carries us right on to the other block. And now, Doctor, we’ve done our work, so it’s time we had some play. A sandwich and a cup of coffee, and then off to violin-land, where all is sweetness and delicacy and harmony, and there are no red-headed clients to vex us with their conundrums.”
	My friend was an enthusiastic musician, being himself not only a very capable performer but a composer of no ordinary merit. All the afternoon he sat in the stalls wrapped in the most perfect happiness, gently waving his long, thin fingers in time to the music, while his gently smiling face and his languid, dreamy eyes were as unlike those of Holmes the sleuth-hound, Holmes the relentless, keen-witted, ready-handed criminal agent, as it was possible to conceive. In his singular character the dual nature alternately asserted itself, and his extreme exactness and astuteness represented, as I have often thought, the reaction against the poetic and contemplative mood which occasionally predominated in him. The swing of his nature took him from extreme languor to devouring energy; and, as I knew well, he was never so truly formidable as when, for days on end, he had been lounging in his armchair amid his improvisations and his black-letter editions. Then it was that the lust of the chase would suddenly come upon him, and that his brilliant reasoning power would rise to the level of intuition, until those who were unacquainted with his methods would look askance at him as on a man whose knowledge was not that of other mortals. When I saw him that afternoon so enwrapped in the music at St. James’s Hall I felt that an evil time might be coming upon those whom he had set himself to hunt down.
	</span>
	</body>
	</html>