Removing a dynamic string from a string in JQuery

Question

I have a string of html which includes within it a table tag. There may be all sorts of tags (tr's/td's etc) within the table tag.

How do I remove the tag from my string, while keeping the rest of the html?

Ie:

If my string is

"<p>testing<table><tr><td>cell 1</td></tr></table> a table</p>"

then I'd like the result to be

"<p>testing a table</p>"

Edit:

Providing some more details: I don't have control over the html, and the p is just an example, it could be any combination of tags or plain text outside the (although there will only be 1 table)

Edit 2:

See above 'How do I remove the tag from my string, while keeping the rest of the html?' This means that if (outside the table) there is an element that is bolded or emphasised, then that tag should not be stopped out

That example strips ALL html, I don't want to do that, only the table tag — Evonet, Aug 21 '15 at 06:18
Look at my updated answer. At the bottom you'll find exactly what you want. — demux, Aug 21 '15 at 07:14

score 3 · Answer 1 · answered Aug 21 '15 at 06:15

3

Simply strip all tags and then append what was left (raw text) inside p element. No regular expressions, no rocket science.

answered Aug 21 '15 at 06:15

Matt Komarnicki

5,198
7
40
92

The p element is an example, there may be other tags outside the table that I need to keep. Ie "
testing
cell 1
a table and here's some bold text" – Evonet Aug 21 '15 at 06:17
OK. You didn't write this while I was answering. :) – Matt Komarnicki Aug 21 '15 at 06:53

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Use the remove method

This would work if the browser allowed you to put a block element such as table inside a p:

var p_el = $("<p>testing<table><tr><td>cell 1</td></tr></table> a table</p>")
# Note: This gets slit into 3 elements: p, table, p. This would not
#       happen with a table inside a block element like a `div`

# Find all table elements and remove them:
p_el.find('table').remove()

# If you want the string back you can do:
p_el[0].outerHTML  # p_el[0] gets the DOM object from the jQuery object

# If the string has already been rendered, then of course you should use the 
# appropriate selector to find the `table` elements within `p` elements and then remove them:
$('.someParentEl p table').remove()

# If you need to remove multiple types of elements, then a more elaborate
# selector can be used within remove. I recommend reading up on jQuery selectors
# But an example might be to exclude div tags as well:
$('.someParentEl p').find('table, div').remove()

# What I suspect is that you actually want to remove all block elements from the string
# (table, div, etc. leaving b, i, strong, span, etc.):
$('.someParentEl p *').filter(function(index) {return $(this).css("display") === 'block'}).remove()
# Note: This will only work on elements already in the DOM.

Related: Why is <table> not allowed inside <p>
And: Nesting block level elements inside the <p> tag... right or wrong?

If you are indeed dealing with tables inside paragraphs in your DOM then this is a whole another can of worms, and I'm not sure how to consistently clean up that mess on the client side.

If the p is just an unfortunate choice in your example, then all my examples should work with the p replaced.

Why is this downvoted? If he uses jQuery this is a pretty good way. — Esko, Aug 21 '15 at 06:47

Umesh Sehta · Answer 3 · 2015-08-21T06:32:53.020

1

Simple and easy to understand the query.

But table should not include inside p tag. you need to use other html tag. I have used div instead p tag.

var stag="<div>testing<table><tr><td>cell 1</td></tr></table> a table</div>";

function removeTag(text, selector) {
    var content= $(text);
    content.find(selector).remove();
    return content.text();
}

var pString = removeTag(stag, "table");
alert(pString);

edited Aug 21 '15 at 06:32

answered Aug 21 '15 at 06:23

Umesh Sehta

10,555
5
39
68

Why did you create a function for this? This is a very simple task for jQuery. Also, by using the .text() function, you get only the text inside the p tag, stripping both the p tags from the string and any other tags within the string. – demux Aug 21 '15 at 06:37
1

I just not create function for this specific task. This function can be used for any selector element. Just need to pass html string and removing selector. – Umesh Sehta Aug 21 '15 at 06:44
`$(str).remove('table')[0].outerHTML` does the job and is much more descriptive of the action being performed. No need to complicate things. – demux Aug 21 '15 at 06:50
OK, but I think it will not work, Are u sure is it work? $(str).remove('table')[0].outerHTML – Umesh Sehta Aug 21 '15 at 06:54
Yeah, dude, just open developer tools in your browser on a page with jQuery and test it. Only takes a few sec... – demux Aug 21 '15 at 06:58
This has stripped all the HTML tags from the outer text though. I'll edit the question to make this more clear – Evonet Aug 21 '15 at 07:11
var result= $("
testing
cell 1
a table").remove('table')[0].outerHTML; console.log(result); The Output is:
testing
But the expected output is:
testing a table
Fiddle here: http://jsfiddle.net/kaadcvba/ – Umesh Sehta Aug 21 '15 at 07:27
Ahh, interesting. jQuery seems to close the p tag automatically when there is a table element inside the p and open another one after the table. Thanks, I'll look into this. I thought this was pretty straight forward and boring but it turns out to be a little interesting. – demux Aug 21 '15 at 07:38
If you try the same thing with a div tag, you'll find that this behaves as expected. I think this might be an instance of jQuery trying to be helpful, but actually making things worse. – demux Aug 21 '15 at 07:41
Tried with div, but it seems the result same as string. http://jsfiddle.net/kaadcvba/1/ – Umesh Sehta Aug 21 '15 at 07:47
Yeah, I looked into it as well. I will eat my hat. Turns out this can't be done in a oneliner. – demux Aug 21 '15 at 08:16

Mahendran Sakkarai · Answer 4 · 2015-08-21T09:50:28.970

0

You can use the following code to remove the tags.

$('tag_to_remove').contents().unwrap();

Check this fiddle.

edited Aug 21 '15 at 09:50

answered Aug 21 '15 at 06:55

Mahendran Sakkarai

8,381
6
44
66

score -1 · Answer 5 · answered Aug 21 '15 at 06:42

-1

I think you html output is wrong it will show like this when you execute this html in browser

 <p>testing</p>
    <table>
        <tbody>
            <tr>
                <td>cell 1</td>
            </tr>
        </tbody>
    </table>
    a table

So when you try to get the text inside "p" tag you will just get the "testing" as output. If the html comes correctly then you can try to remove table using using

$('p table').remove();

Then you are able to get desired output. Hope this will help you.

answered Aug 21 '15 at 06:42

Ashish Ranade

595
2
14

I don't have control over the html, and the
is just an example, it could be any combination of tags or plain text outside the
(although there will only be 1 table)
– Evonet Aug 21 '15 at 06:51
Ok you can remove table tag from your selector i.e id,class or from the body whatever suits you using .remove(). I tried to remove table tag from whole html document and it works here is my code – Ashish Ranade Aug 21 '15 at 07:09
testing
cell 1
a table Try it – Ashish Ranade Aug 21 '15 at 07:10

Removing a dynamic string from a string in JQuery

5 Answers5

Use the remove method