Jquery: Strip all specific HTML tags from string

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 = "
Some text
More texthere
Even more
"; 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.

4 Answers 4

.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 = "
Some text
More texthere
Even more
"; 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.

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

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/]

@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)

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

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

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

$.htmlClean("
", ); => 
Nested P Test
 

You can replace specific tags with and it will still render the contents just not the tag.

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.

I had to do something similar: keep a block of text from containing any HTML tag other than , or . 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(); > 

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 = "
Some text
More texthere
Even more
"; $("" + temp + "").find('span,p'). contents().unwrap().end().end().html()` 

As a more general function:

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

Источник