comment mettre en évidence une partie de textarea html code

Question

Je veux réaliser une version web python regexbuddy, et je rencontre un problème, comment mettre en évidence des valeurs de correspondance de couleur différente (basculer entre le jaune et le bleu) dans une zone de texte, il y a une démo ce que je veux exactement sur http://regexpal.com, mais j'étais un novice sur js, je ne comprenais pas sa signification de code. des conseils est apprécié

Answer 1

Il y a un élément pre sur la zone de texte. Ainsi, lorsque vous tapez quelque chose, il copie l'entrée sur l'élément pre, en appliquant des filtres.

Par exemple:

<pre id="view"></pre> 
<textarea id="code"></textarea> 

Lorsque vous tapez sur #code il copie la valeur, l'application de filtres et en ajoutant le code HTML à l'#view.

var code = document.getElementById("code"); 
var pre = document.getElementById("pre"); 
(code).onkeyup = function(){ 
    val = this.value; 
    val = YourRegex(val); 
    (pre).innerHTML = val; 
}; 

YourRegex serait une méthode pour correspondre à la regex et retourner une partie du contenu analysé à l'pre, vous permettant de personnaliser l'apparence du textarea (qui est en fait un élément au-dessus).

function YourRegex(val) 
{ 
    // This function add colors, bold, whatever you want. 
    if (/bbcc/i.test("bbcc")) 
     return "<b>" + val + "</b>"; 
} 

Answer 2

@ La solution de BrunoLM est excellente, mais pourrait nécessiter plus de piratage que vous ne le souhaitez. Si vous êtes intéressé (et si jQuery est déjà dans votre pile), le plug-in suivant peut être utile de jeter un oeil à:

http://garysieling.github.io/jquery-highlighttextarea/

Answer 3

Pour gagner du temps, vous devriez envisager d'utiliser une bibliothèque existante pour cette exigence.

Citation de here:

Comme éléments textarea ne peuvent pas rendre HTML, ce plugin vous permet de mettre en évidence le texte à l'intérieur des éléments textarea.

jQuery highlightTextarea.

Démo: Codepen

Utilisation:

$context.highlightTextarea(options);