Interactive string manipulation via javascript

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?

If you want to capture events on individual characters, you'll need to have each character in an individual element. — lonesomeday
– lonesomeday, Commented May 30, 2011 at 12:46
Textarea: foobar => CLICK between o and b => foo bar? Is that enough? — polarblau
– polarblau, Commented May 30, 2011 at 12:47
You may be interested in looking at Lettering.js, which can put letters (or words) in <span> tags for you. — Pointy
– Pointy, Commented May 30, 2011 at 12:51
Have a look at Rangy for cross-browser selections & ranges. code.google.com/p/rangy — Matt Ball
– Matt Ball, Commented Oct 10, 2011 at 15:48

polarblau · Accepted Answer · 2011-05-30 13:04:57Z

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.

answered May 30, 2011 at 13:04

polarblau

17.8k8 gold badges66 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giacomo Over a year ago

Thanks, this is a good starting point. Also, thanks for the example :)

gaRex · Accepted Answer · 2011-05-30 12:50:39Z

0

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

answered May 30, 2011 at 12:50

gaRex

4,23528 silver badges37 bronze badges

Collectives™ on Stack Overflow

Interactive string manipulation via javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related