Comment puis-je créer une zone de texte d'entrée html de manière à pouvoir souligner ou formater certains mots?

Question

Je voudrais un champ de saisie pour lequel javascript peut définir certains attributs, pour différentes parties du champ de saisie. Un exemple simple pour montrer ce que je voudrais faire: disons que je veux souligner tous les mots malédiction dans une zone de texte d'entrée. Ainsi, le javascript vérifierait la zone de texte d'entrée lorsqu'une nouvelle lettre est insérée, et pour tous les mots correspondant à mon tableau de mots malédictions reconnues, il soulignerait le mot. Remarque, je ne veux pas que l'utilisateur/client puisse définir les attributs du texte, je veux simplement que le javascript soit capable de formater certains mots différemment des autres (donc, pas de barre d'outils ou quoi que ce soit). Je veux aussi que la boîte ressemble exactement à une zone de texte normale à tous les autres égards.

Je suis déjà au courant de certains éditeurs de texte riche (comme juju editor et lwrte) ainsi que de certains surligneurs de syntaxe mais je ne suis pas sûr qu'ils fassent ce que je veux.

Alors, quelqu'un connaît un outil qui me permettrait de faire cela?

Merci

Answer 1

Vous pouvez faire une div "contenteditable" en définissant cet attribut à true sur la div. Puis entourez les mots en question avec un balisage qui n'affecte pas la mise en page, mais qui peut être stylé et facilement retiré plus tard.

Quelque chose comme ceci:

<style type="text/css"> 
    .content { 
    border: 5px inset #000; 
    padding: 5px; 
    } 

    .content .curse { 
    color: #f00; 
    font-weight: bold; 
    text-decoration: underline; 
    } 
</style> 
<div contentEditable="true" class="content"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat gravida tempus. Vivamus convallis, purus dictum bibendum ullamcorper, neque ipsum aliquam ligula, sit amet imperdiet est ante non nisl. Mauris dignissim libero et urna iaculis at iaculis metus semper. Sed ac nisl eu arcu molestie pretium quis quis ligula. Cras vitae enim vitae lacus molestie dictum. Donec rutrum tincidunt augue, vel pretium lectus faucibus ut. In consequat diam accumsan urna fermentum vitae tincidunt ipsum rutrum. Curabitur sagittis, ante a viverra fringilla, orci urna feugiat urna, eu ultricies lacus odio adipiscing risus. Sed pellentesque blandit ipsum vel hendrerit. Nulla nibh mauris, egestas sed consectetur et, lobortis in dolor. Curabitur eu ante lectus. Cras consequat, dui sed pellentesque tempor, purus turpis egestas sapien, in fermentum eros tortor vel mi. Integer accumsan, augue id elementum pretium, est quam vehicula nisl, at congue purus sem quis ipsum. Aliquam commodo, erat in euismod lacinia, tortor lectus interdum lacus, quis vestibulum augue nulla in tellus. 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    var html = $('.content').html(); 
    $('.content').html(html.replace(/lectus/gi, '<span class="curse">lectus</span>')); 
    }); 
</script>