Alter user-selected text

**gits** · Dec 26 '07, 02:13 PM

hi ...

have a look here ... may be that helps :)

kind regards

**helimeef** · Dec 26 '07, 07:48 PM

Originally posted by gits

hi ...

have a look here ... may be that helps :)

kind regards

Thanks for the help, but that page isn't completed, and I already knew how to retrieve the text a user has selected, I just need to know how to change it. I don't mean just edit a variable storing the selection, I mean actually changing the text that was selected on the page.
Thanks though! :D

**gits** · Dec 26 '07, 08:03 PM

change to what?

kind regards

**helimeef** · Dec 26 '07, 09:32 PM

Originally posted by gits

change to what?

kind regards

Say that a simple page looks like this (forget the WYSIWYG thing):
[CODE=html]
<body>
<p>I am a simple page</p>
<button id="changeSelec ted">Change selected text</button>
</body>
[/CODE]
And the user selects/highlights "I am" in the first <p> and then clicks the button, and the text that they selected is changed to like "I am not", making the generated source look like this:
[CODE=html]
<body>
<p>I am not a simple page</p>
<button id="changeSelec ted">Change selected text</button>
</body>
[/CODE]
How can I change the text on the page that a user has selected.
The reason I'm asking this is because say that in the WYSIWYG editor, somebody selects text and clicks the bold button. I then want the JavaScript to store the selected text in a variable, add <strong> tags around it, and then replace the selected text with new bolded text.
I hope I'm making myself clear...

**gits** · Dec 26 '07, 11:12 PM

this are two different things but you may handle them the same way if you wish:

1. editing the selected text:

idea is to replace the selected text with the edited text ... identify the start and the end of the range, remove the characters here from range start to end and insert the new text

2. add tags:

idea is ... identify the start and the end of the range (same as above) but simply add the respective tag-text to the current text at the range start and end positions

kind regards

**helimeef** · Dec 27 '07, 08:22 PM

Originally posted by gits

this are two different things but you may handle them the same way if you wish:

1. editing the selected text:

idea is to replace the selected text with the edited text ... identify the start and the end of the range, remove the characters here from range start to end and insert the new text

2. add tags:

idea is ... identify the start and the end of the range (same as above) but simply add the respective tag-text to the current text at the range start and end positions

kind regards

Okay I went ahead and made the range and used a for loop to list its properties. Now I found startOffset and endOffset in Firefox... How can I replace only the text between those two values? I can imagine string.replace but that doesn't allow you to specify a start and end point. Substring does but you do not edit anything, just returns a value. What function should I use?
Kind regards (hehe)

**gits** · Dec 27 '07, 08:32 PM

the substring method should do it :)

[CODE=javascript]var text = 'foo bar foobar';
var new_selected = 'newbar';
var new_text = text.substr(0, 4) + new_selected + text.substr(7, text.length);
[/CODE]
now you could replace the entire text of the html node with new_text ...

kind regards

**helimeef** · Dec 27 '07, 08:40 PM

Originally posted by gits

the substring method should do it :)

[CODE=javascript]var text = 'foo bar foobar';
var new_selected = 'newbar';
var new_text = text.substr(0, 4) + new_selected + text.substr(7, text.length);
[/CODE]
now you could replace the entire text of the html node with new_text ...

kind regards

Oh duh :) Never thought of that XD
Happy new year :)

**gits** · Dec 27 '07, 08:46 PM

happy new year to you too ;) ... post back to the forum in case you have more questions ...

kind regards

Alter user-selected text

Alter user-selected text

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment