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