Jquery: Strip all specific HTML tags from string

Question

I have a variable that contains a string of text and html tags, such as:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";

I would like to remove all tags of a certain type. Let's say all p and span tags for example.

This is the best I can come up with:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
var $temp = $(temp);
$("p", $temp).replaceWith("foo");
alert($temp.html());  //returns "Some text"

The closest response I could find is this answer by Nick Craver: strip span tags from string with jquery.

edited question: p tags and span tags are what I want to replace. But this may change in the future. — iammatthew2
– iammatthew2, Commented Jul 11, 2012 at 22:46

nbrooks · Accepted Answer · 2012-07-11 23:14:07Z

13

Demo: http://jsfiddle.net/VwTHF/1/

$('span, p').contents().unwrap();

.contents() will get the elements and text within each such tag, and .unwrap will remove the element wrapping each content section.

Based on your current approach it would look something like this:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
var $temp = $(temp);
$temp.find('span, p').contents().unwrap().end().end();

If you want to continue targeting the original object, you have to use .end() to clear the filter.

edited Jul 11, 2012 at 23:14

answered Jul 11, 2012 at 22:49

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

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

11 Comments

nbrooks Over a year ago

Hope I didn't misunderstand your question. You are just trying to get rid of the tags but leave the text right?

iammatthew2 Over a year ago

Yes, I just want to remove certain tags and keep the text and all other tags. But I could not get the above to work in this example: [jsfiddle.net/nEFhA/]

nbrooks Over a year ago

@iammatthew2 It works perfectly. You forgot to include jQuery: jsfiddle.net/WPpqE (you have to specify the framework to use in the options on the left)

iammatthew2 Over a year ago

Indeed it does - thanks! Now how do I run that against a string contained in a variable? I've unsuccessfully tried this: jsfiddle.net/PgJnW

nbrooks Over a year ago

Note: .html() will only return the contents of an element -- only the div contents. .text() will return everything. jsfiddle.net/VwTHF/1

|

scrappedcola · Accepted Answer · 2012-07-11 22:33:05Z

2

You could try the jquery plugin HTML Clean. In the example they provide:

$.htmlClean("<H1 class=\"header\"><P>Nested P Test</H1>", {format:true});

=> 
<h1>
        Nested P Test
</h1>

You can replace specific tags with {removeTags:[p]} and it will still render the contents just not the tag.

answered Jul 11, 2012 at 22:33

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

1 Comment

iammatthew2 Over a year ago

Thanks! I'll give this a try, but I was thinking that Jquery could take care of this with just a few lines of code.

cypherkaz · Accepted Answer · 2013-05-28 19:25:10Z

I had to do something similar: keep a block of text from containing any HTML tag other than <b>, <i> or <u>. This question and several others pointed me towards my own function:

function cleanNonFormattingTags(htmlContents) {
    if (htmlContents && htmlContents.length) {
        var result = '';
        htmlContents.each(function () {
            var $child = $(this), type = $child.prop('tagName'), isTextNode = this.nodeName == "#text";
            if (isTextNode) {
                result += this.textContent;
            }
            else if (type == 'B' || type == 'U' || type == 'I' || type == 'BR') { // Allow only these types of tags
                var innerContent = cleanNonFormattingTags($child.contents());
                var $newTag = $(document.createElement(type)).html(innerContent);
                result += $newTag[0].outerHTML;
            }
            else {
                result += cleanNonFormattingTags($child.contents());
            }
        });
        return result;
    }
    return htmlContents.text();
}

Hope this helps!

door_number_three · Accepted Answer · 2017-10-12 18:38:10Z

0

I'll follow up on @nbrooks because his answer is very close to what you want, but not quite. @nbrooks hit on the solution by noting that html() gives you the data that is wrapped in a tag. The solution therefore is to wrap your HTML in a tag. This should do the trick for you:

var temp = "<div>Some text</div><p>More text<span>here</span></p><p>Even more</p>";
$("<span>" + temp + "</span>").find('span,p').
  contents().unwrap().end().end().html()`

See http://jsfiddle.net/18u5Ld9g/1/ for an example.

As a more general function:

function stripTags(html, tags) {
  // Tags must be given in CSS selector format
  return $("<span>" + html + "</span>").find(tags).
    contents().unwrap().end().end().html();
}

answered Oct 12, 2017 at 18:38

door_number_three

6,0612 gold badges18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery: Strip all specific HTML tags from string

4 Answers 4

11 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related