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>