Metti un tag intorno al testo evidenziato dall'utente?

Question

Ho bisogno di ottenere l'area selezionata dall'utente di una textarea e quindi inserire i tag <a> attorno ad esso.

Io lo uso per ottenere l'utente area selezionata:

var textComponent = document.getElementById('article'); 
var selectedText; 

if (document.selection != undefined) 
{ 
    textComponent.focus(); 
    var sel = document.selection.createRange(); 
    selectedText = sel.text; 
} 

// Mozilla version 
else if (textComponent.selectionStart != undefined) 
{ 
    var startPos = textComponent.selectionStart; 
    var endPos = textComponent.selectionEnd; 
    selectedText = textComponent.value.substring(startPos, endPos) 
} 

Ora, so che posso fare una stringa di ricerca per il testo utente selezionato e inserire un tag intorno ad esso, ma cosa succede se l'utente selezionato il testo appare due volte nel testo, per esempio.

Ciao a te, addio a voi.

Se l'utente evidenzia il secondo "tu" per il collegamento che desidera, sicuramente una stringa sostituirà un tag attorno a ogni istanza di "tu".

Qual è il modo migliore per farlo?

Answer 1

Si potrebbe utilizzare il mio jQuery plug-in per questo (demo):

$("#article").surroundSelectedText('<a href="foo.html">', "</a>"); 

In alternativa è possibile utilizzare la funzione getInputSelection() che ho postato su Stack Overflow un paio di volte per ottenere gli indici di inizio di selezione e di carattere fine a se tutti i principali browser e poi fare la sostituzione di stringhe sul value del textarea:

var sel = getInputSelection(textComponent); 
var val = textComponent.value; 
textComponent.value = val.slice(0, sel.start) + 
         '<a href="foo.html">' + 
         val.slice(sel.start, sel.end) + 
         "</a>" + 
         val.slice(sel.end); 

Answer 2

Perché catturare il testo selezionato a tutti? Quello che vuoi veramente è la posizione iniziale/finale per rilasciare i tag.

var textComponent = document.getElementById('article'); 
var selectedText; 
var startPos; 
var endPos; 

// the easy way 
if (textComponent.selectionStart != undefined) 
{ 
    startPos = textComponent.selectionStart; 
    endPos = textComponent.selectionEnd; 
} 
// the hard way 
else if (document.selection != undefined) 
{ 
    textComponent.focus(); 
    var sel = document.selection.createRange(); 
    var range = document.selection.createRange(); 
    var stored_range = range.duplicate(); 
    stored_range.moveToElementText(textComponent); 
    stored_range.setEndPoint('EndToEnd', range); 
    startPos = stored_range.text.length - range.text.length; 
    endPos = startPos + range.text.length; 
} 

// add in tags at startPos and endPos 
var val = textComponent.value; 
textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos); 

codice di IE modificato da this reference.

MODIFICA: Nota Il commento di Tim Down su newline. Inoltre, probabilmente usa la sua solzione, perché è meglio.