Question

is there a jquery selector for text that is highlighted after its dragged over by the mouse cursor? For example, I want to select text that I’ve typed into my textarea field, click a button, which puts <p> tags around the text I’ve highlighted with my mouse cursor. A non-plugin solution would be preferred, thanks.

Answer 1

There’s a straight up javascript solution that’s pretty nice… just use inputElement.selectionStart and inputElement.selectionEnd .

It’s helpful to note that this is just on Dom elements, so you’ll have to take your jQuery selector for your textarea and add [0] to get the element itself, ie. $("#myTextArea")[0].selectionStart.

From there you can do some string work and add in your <p> tags at the appropriate indexes.

I haven’t tested this, but it should work…

var selStart = $("#myTextArea")[0].selectionStart;
var selEnd = $("#myTextArea")[0].selectionEnd;

var originalString = $("#myTextArea").val();

var segment_1 = originalString.substr(0,selStart);
var segment_2 = originalString.substr(selStart,selEnd);
var segment_3 = originalString.substr(selEnd,originalString.length);

var finalString = segment_1 + "<p>" + segment_2 + "</p>" + segment_3;

$("#myTextArea").val(finalString);