Homepage von Basti1012 = loesungen ,Hauptmenü

< >
text-faerben-beim-conteditabel-feld-wenn-bestimmtes-wort-geschrieben-wurde.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;
}
#basti1012{
position:absolute;
bottom:10px;
left:calc(50% - 50px);
text-align:center;
font-size:12px;
color:blue;
width:100px;
}
body {
  color: #2c3e50;
  background: #ecf0f1;
}
h3{
  text-align: center;
  margin:90px;
}
#aa{
  border:1px solid black;

  margin-left:1px;
  pointer-events:none;
  background:none;
  border:1px black;
  font-weight:100;
}
#aa span{
  color:yellow;

}

#aa,#ww{
font-size:50px;
width:80%;
margin:0 auto;
margin-top:40px;

}
#aa{
  font-weight:100;
margin-top:-58.8px;
}
#ww{
  border:1px solid black;
}



</style>
</head>
<body>
<div id="ww" contenteditable></div>

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


 
<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>
<h3>Schreibe "test.de" oder "html" in das feld</h3>"
<a id="basti1012" href="https://sebastian1012.bplaed.net">Homepage Basti1012</a>


</body>
</head>