Question

When I select some texts on the <textarea> using my mouse, how can I shuffle/scramble it by clicking on a button?

I’ve searched for something similar to what I want here on SO, and I saw some who use substring, selectionStart, and selectionEnd.

What I want is: when I select some texts with my mouse, it will be shuffled/scrambled when I click on a button, and the rest of the texts on the <textarea> that are not selected should remain untouched/intact.

I just want to perform an action on the selected texts.

It’s more similar to a rich text editor like when you select on some texts, then click on bold button, the selected texts will become bold.

P.S.
It should be shuffled by individual characters.

EDIT:
Got it! I just needed to separate the selection string. My code works now. This is very helpful – https://stackoverflow.com/a/9605191/1101391

Unfortunately, IE 9 and below does not support selectionStart and selectionEnd properties on <input> and <textarea>. Here’s the solution that worked for me – https://stackoverflow.com/a/9276457/1101391

Answer 1

You have access to the full text and know the substring where the selection starts and ends. Try something like this:

var txtArea = document.getElementById("foo");
var before = txtArea.value.substr(0, txtArea.selectionStart);
var selection = txtArea.value.substr(txtArea.selectionStart, txtArea.selectionEnd + 1);
var after = txtArea.value.substr(txtArea.selectionEnd, txtArea.value.length);
txtArea.value = before + scrambleThisString(selection) + after;