Question

I have a webapp that must allow users to interactively manipulate strings (words, phrases and so on…)

Example:

given a foobar string, if the user clicks on b the string is split in two and a whitespace is added, resulting in foo bar.

I could put each single character inside a span element, but I fear this would be troublesome for long strings.

Any advice?

Answer 1

This version using jQuery (not necessary) should pretty much do what you need if I understood you correctly:

// Given a textarea with the content
var text = $('textarea').text().split('');

$('textarea').click(function(){
    text.splice(this.selectionStart, 0, " ");
    this.value = text.join('');
});

It’s a very simple and not cross browser enabled example, but it should get you started.