Mettez en surbrillance le texte que vous tapez sur la zone de texte

Question

J'essaie de créer une zone de texte qui mettra en surbrillance certains mots clés lorsque l'utilisateur y tape. Je sais que textarea ne peut supporter que du texte brut et que je dois utiliser un éditeur de "texte riche" pour y parvenir. Je voudrais quelque chose de vraiment simple et pas les «riches éditeurs» gonflés là-bas. Des idées?

Merci!

Answer 1

Voici un extrait qui vous donne les bases de ce que l'on recherche:

<style> 
    .textarea { font-family:arial; font-size:12px; border:0; width:700px; height:200px; } 
    .realTextarea { margin:0; background:transparent; position: absolute; z-index:999; } 
    .overlayTextarea { margin:0; position:absolute; top:1; left:1; z-index:998; } 
    .textareaBorder { border:groove 1px #ccc; position:relative; width:702px; height:202px; } 
    .highlight { background: yellow; } 
</style> 

<script> 
    var _terms = ['January', 'February', 'March']; // YOUR SEARCH TERMS GO HERE // 

    function preg_quote(str) { 
     return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1"); 
    } 

    function doit() { 
     var s = myTextarea.value; 

     for (i=0; i<_terms.length; i++) 
      s = s.replace(new RegExp(preg_quote(_terms[i]), 'gi'), '<span class="highlight">' + _terms[i] + '</span>'); 

     myOtherTextarea.innerHTML = s.replace(new RegExp(preg_quote('\r'), 'gi'), '<br>'); 
    } 
</script> 

<div class="textarea textareaBorder"> 
    <textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea> 
    <div id="myOtherTextarea" class="textarea overlayTextarea"></div> 
</div> 

Le concept de base est que le <textarea> (en haut) est transparent et le <div> contient sous les « riches/hightlighted » version. Il y a place à amélioration quand il s'agit d'envelopper le texte, mais vous avez l'idée. Bonne mise en évidence!

Crédit: La fonction preg_quote est de Kevin van Zonneveld http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_preg_quote/

Answer 2

Jetez un oeil à celui-ci: http://codemirror.net/