I need to get the user selected area of a textarea and then insert <a> tags round it.

I use this to get the user selected area:

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)
}

Now, I know I can do a string search for the user selected text and insert a tags round it, but what happens if that user selected text appears twice in the text, for example.

Hello to you, goodbye to you.

If the user highlights the second 'you' for the link they want, surely a string replace would put a tags around every instance of 'you'.

Whats the best way to do this?

I need to get the user selected area of a textarea and then insert <a> tags round it.

I use this to get the user selected area:

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)
}

Now, I know I can do a string search for the user selected text and insert a tags round it, but what happens if that user selected text appears twice in the text, for example.

Hello to you, goodbye to you.

If the user highlights the second 'you' for the link they want, surely a string replace would put a tags around every instance of 'you'.

Whats the best way to do this?

• javascript
• jquery

• I expect a string replace would give you the option of "replace all" or "replace first occurrence." If you use "first occurrence" and are able to start at the selection-start point, that might be sufficient? – pjmorse Commented May 24, 2012 at 13:49
• keeping a lastFocusedElement variable may help. Find text in that particular element. – Jashwant Commented May 24, 2012 at 14:01

2 Answers 2

You could use my jQuery plug-in for this (demo):

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

Alternatively you could use the getInputSelection() function that I've posted on Stack Overflow a few times to get the selection start and end character indices in all major browsers and then do string substitution on the textarea's value:

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);

Why capture the selected text at all? What you really want is the start/end positions to drop in tags.

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);

IE code modified from this reference.

EDIT: Note Tim Down's ment about newlines. Also, probably use his soltion, because it's better.