Mettre en surbrillance un morceau de corde dans un TextArea

Question

J'essaie de mettre en évidence un morceau de texte dans un "Textarea". Je une longue chaîne dans ce TextArea:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident 

Et j'ai une fonction qui permet d'extraire la première occurrence de chaîne qui est entre les vars « commencer » et « fin ». Par exemple:

extract("ipsum", "consectetur") // This will give: "dolor sit amet," 

Mais, ce que je veux est de sélectionner le résultat de la fonction de sorte que la chaîne résultante « dolor sit amet, » sera mis en évidence.

Est-ce possible? Comment puis-je faire cela?

Merci,

Cordialement.

Answer 1

Je me souviens avoir vu cela il y a un certain temps ... http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/NSHTMLTextAreaElement.htm

Son assez compliqué et je ne pourrais jamais être tout à fait pris la peine d'obtenir ma tête autour d'elle. Dunno si c'est ce dont vous avez besoin, ou si vous pouvez l'utiliser du tout. :)

Answer 2

Vous ne pouvez pas mettre en évidence différentes parties de texte dans une zone de texte. Vous pouvez sélectionner une pièce mais pas plusieurs pièces et sélectionner ne pas surligner. Vous pouvez prendre le contenu de votre zone de texte et <div> par exemple et mettre en évidence les phrases en les entourant avec <span class="highlight">...</span>

Answer 3

Voici un code qui va sélectionner une plage de texte dans une zone de texte dans tous les principaux navigateurs, y compris IE 6+ :

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setSelection(el, start, end) { 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     el.selectionStart = start; 
     el.selectionEnd = end; 
    } else if (typeof el.createTextRange != "undefined") { 
     var range = el.createTextRange(); 
     var startCharMove = offsetToRangeCharacterMove(el, start); 
     range.collapse(true); 
     if (start == end) { 
      range.move("character", startCharMove); 
     } else { 
      range.moveEnd("character", offsetToRangeCharacterMove(el, end)); 
      range.moveStart("character", startCharMove); 
     } 
     range.select(); 
    } 
} 

var textarea = document.getElementById("your_textarea"); 
var val = textarea.value; 
var start = val.indexOf("ipsum") + 5, end = val.indexOf("consectetur"); 
setSelection(textarea, start, end);