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>