deleting tags using DOM

[herrmiller]

Hey, i'm building a DOM rich text editor and i have run into a few problems but i have one question for now...

i know i can easily use surroundContents() to add a new tag around some text... but what is the best way to remove it? so far i have been trying to select the entire node, extract the contents and create a new node with just the text content, and completely replace the old one with the new extracted one.

i'm mainly producing it for firefox and mozilla so no need to take into account inconcistencies with internet explorer btw.

thanks!

 

[BillyRayPreachersSon]

Perhaps this will help?

https://developer.mozilla.org/en/DOM/range

Could 'deleteContents' be what you're after?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[herrmiller]

thanks for your reply!

already been spending a lot of time there, good page! i was thinking about first selecting a piece of text, then use rng.extractContent() to get a document fragment, then modify that fragment somehow and finally use rng.insertNode() to reinsert the modified fragment... however i cant seem to be able to modify the document like i want... i would like to do something like this:

str = fragment.innerHTML.toString().replace("<b>", "");
fragment.innerHTML = str;

but innerHTML doesnt work on the fragment, i can only use textContent and that doesnt give me the tags...

any ideas?

 

[herrmiller]

ok so i'm getting closer now, this is how far i have gotten... if i have a coded string like the following.

<strong>This is |simply </strong><em>some random text</em> <strong>that i typed| just for you.</strong>

if i make a selection like i have indicated above (left of 'simply', right of 'typed'), create a range and extractContents i get a documentFragment like following

<strong>simply </strong><em>some random text</em> <strong>that i typed</strong>

The text nodes that have been cut in the original text are conviently enough also closed. So this seems like a good solution. However, now i want to go through all the <strong> nodes in the fragment and remove them, leaving their text content...

Any good ideas of how to this?

Also, if i select text like this (with the intention of making the selection bold):

<em>This is |simply some</em> random text that i typed| just for you.

i get a fragment like this:

<em>simply some</em> random text that i typed

if the user has chosen to make the selection bold i want to surround Every textNode with <strong> tags and turn the fragment into this:

<em><strong>simply some</strong></em><strong>random text that i typed</strong>

Any good ideas of how to do this? I was thinking of you could somehow use a range object to select each individual textNode and use surroundContents() but i am not sure how to iterate through all the nodes to find the textNodes in the best way...