Interactive string manipulation via javascript

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?

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.

Yes, it will be ok, but setup your event handler not on individual spans, but on the whole container and then see here: http://en.wikipedia.org/wiki/Flyweight_pattern