Iterating over all tags in a string containing HTML using javascript/jquery

Question

I'm using a rich text editor type control, which is a written as a jQuery plugin. It basically inserts an IFrame onto the page, and makes it editable - fairly standard for rich text controls.

Now, what I'm looking to do is improve upon an option which removes all formatting from the text editor. Currently it is being done with a large list of regular expressions, and a quick google search suggests that this is not the correct way to go about it. I'm looking to allow this unformatting some degree of flexibility, so that I can leave certain tags in (like paragraph tags).

I was trying to use the jQuery built in DOM parsing to do this easily, but I seem to be having trouble.

Let's assume I have a sample HTML string:

<Body><p>One <strong>Two</strong> <em>Three</em></p></Body>

I'm looking to un-format it so that all non paragraph tags are removed. So, I'd be expecting the output to be a string which looks like this:

<Body><p>One Two Three</p></Body>

Sample code:

//Some very simple HTML obtained from an editable iframe
var text = '<Body><p>One <strong>Two</strong> <em>Three</em></p></Body>';
var $text = $(text);

//All tags which are not paragraphs
$(':not(p)',$text).each(function() {
    //Replace the tag + content with just content
    $(this).html($(this).text());
});

//I'll be honest, I found this snippet somewhere else on stackoverflow,
//It seems to parse the jquery object back into an HTML string.
var returnVal = "";
$text.each(function(){
    returnVal += $(this).clone().wrap('<p>').parent().html();
});
//Should be equal to '<p>One Two Three</p>'       
return returnVal;

This seems like it should work, but unfortunately it doesn't. In the above example, 'returnVal' is the same as the input (minus the 'body' header tags). Is there anything I'm obviously doing wrong here?

John, it's an spaghetti code! can you give us a summary what is the input and what is the desired output you want. — gdoron
– gdoron, Commented Jun 25, 2012 at 22:53
Is it really that bad? I tried to make it clear. Hold up, and let me edit it a little bit. — John
– John, Commented Jun 25, 2012 at 22:57
Characterizing the code as spaghetti... is just wrong. It reads perfectly fine. You do have a bug which I'll address shortly. — John Green
– John Green, Commented Jun 25, 2012 at 23:00
Of course, and I'd prefer the parsing way 9 times out of 10, even though my regex-fu is (well, usually, but not always) good enough to see how it can be made with the Chtulhu way. )) — raina77ow
– raina77ow, Commented Jun 25, 2012 at 23:14
$text.not('p').not('em'), $(':not(p,em)', $text) or $text.not('p,em') should all work (although I'm not 100% on the ':not(p,em)' syntax off the top of my head. — John Green
– John Green, Commented Jun 25, 2012 at 23:28

raina77ow · Accepted Answer · 2012-06-25 23:01:40Z

2

Replace this line:

$(this).html($(this).text());

... with this:

$(this).replaceWith($(this).text());

... and it should work (at least it works here).

answered Jun 25, 2012 at 23:01

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

Comments

John Green · Accepted Answer · 2012-06-25 23:02:23Z

1

...snip
// Here's your bug:
$(':not(p)',$text).each(function() {
//  You can't use .html() to replace the content 
//     $(this).html($(this).text());
//   You have to replace the entire element, not just its contents:
    $(this).replaceWith($(this).text());
});
...snip

answered Jun 25, 2012 at 23:02

John Green

13.5k3 gold badges31 silver badges52 bronze badges

Collectives™ on Stack Overflow

Iterating over all tags in a string containing HTML using javascript/jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related