Lösungen ,beim schreiben text erkennen und einfarben

beim-schreiben-text-erkennen-und-einfarben.php

Quell Code

 <!DOCTYPE html>
<html>
<head>
    <title>itel</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<style>
*{
margin:0;
padding:0;
}
 
body {
  color: #2c3e50;
  background: #ecf0f1;
}
h1 {
  text-align: center;
}
#aa{
  border:1px solid black;
   margin-top:-20px;
  margin-left:1px;
  pointer-events:none;
  background:none;
  border:1px black;
  font-weight:100;
}
#aa span{
  color:yellow;

}
#aa,#ww{
  font-weight:100;
  font-size:35px;
  width:80%;
  margin:0 auto;
}
#ww{
  border:1px solid black;
  margin-top:120px;
}
  #aa{
    margin-top:-41px;
  }
  h3{
    margin:160px;
    text-align:center;
  }
</style>
</head>
<body>
<div id="ww" contenteditable></div>

<div id="aa"></div>

  <h3>Gebe test.de oder html ein </h3>
<script>


$('#ww').on('keyup',function(){
   
var bb2= $('#ww').html();
 $('#ww').html();
bb2=bb2.replace(/test.de|gg/g,'<span style="color:yellow">$&</span>');
bb2=bb2.replace(/html/g,'<span style="color:red">$&</span>');


  $('#aa').html(bb2) 
   $('#ww').focus();
 }) 
   
</script>

 

</body>
</html>