Beispiel:JS-Tut-String-07.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Wörter suchen und markieren</title>
<style>
mark {
  background-color: yellow;
  font-weight: bold;
  font-style: cursive;
}

</style>
<script>
'use strict';  
document.addEventListener('DOMContentLoaded', function () {
	document.getElementById('button').addEventListener('click', function () {
		document.querySelector('output').textContent = highlight(inputText,searchTerm);
	});
	var inputText = document.querySelector('textarea').innerHTML,
		outputText,
	    searchTerm = 'Polizei';
		
	function highlight(inputText,searchTerm) {
  		var index = inputText.indexOf(searchTerm);
  		if (index >= 0) { 
   			inputText = inputText.substring(0,index) + "<mark>" + inputText.substring(index,index+searchTerm.length) + "</mark>" + inputText.substring(index + searchTerm.length);
	     }
		document.querySelector('#output').innerHTML = inputText;
	}
 	  
});

</script>
</head>
<body>
  <h1>Strings 7 - Wörter suchen und markieren</h1>

<textarea id="inputText" cols="50" rows="8">Drei Chinesen mit dem Kontrabass saßen auf der Straße und erzählten sich was. Da kam die Polizei, fragt‚ Was ist denn das?‘ Drei Chinesen mit dem Kontrabass.</textarea>
  <button type="button" id="button" >Los</button>
  <p>Mit einem Klick auf den Button durchsuchen Sie das Textfeld nach einem Suchbegriff. Sie können auch eigenen Text eingeben.</p>
  <div id="output"></div>


</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-Tut-String-07.html&oldid=80628“