CODEWITHSUNDEEP
jquery
iammatthew2
iammatthew2

Reputation: 659

Jquery: Strip all specific HTML tags from string

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.

Upvotes: 7

Views: 14284

Answers (4)

door_number_three
door_number_three

Reputation: 6053

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();
}

Upvotes: 0

cypherkaz
cypherkaz

Reputation: 121

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!

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

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.

Upvotes: 13

scrappedcola
scrappedcola

Reputation: 10572

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.

Upvotes: 2

Related Questions