Remove specific HTML tag with its content from javascript string

Question

I have the following string variable and I want to remove all a tags with its content from the string.

var myString = "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";

I have checked this Remove HTML content groups from start to end of string in JavaScript question's answers but it is for all tags.

Thank you

anubhava · Accepted Answer · 2017-07-23 07:10:11Z

23

You should avoid parsing HTML using regex. Here is a way of removing all the <a> tags using DOM:

// your HTML text
var myString = '<table><tr><td>Some text ...<a href="#">label...</a></td></tr></table>';
myString += '<table><tr><td>Some text ...<a href="#">label...</a></td></tr></table>'
myString += '<table><tr><td>Some text ...<a href="#">label...</a></td></tr></table>'

// create a new dov container
var div = document.createElement('div');

// assing your HTML to div's innerHTML
div.innerHTML = myString;

// get all <a> elements from div
var elements = div.getElementsByTagName('a');

// remove all <a> elements
while (elements[0])
   elements[0].parentNode.removeChild(elements[0])

// get div's innerHTML into a new variable
var repl = div.innerHTML;

// display it
console.log(repl)

/*
<table><tbody><tr><td>Some text ...</td></tr></tbody></table>
<table><tbody><tr><td>Some text ...</td></tr></tbody></table>
<table><tbody><tr><td>Some text ...</td></tr></tbody></table>
*/

answered Jul 23, 2017 at 7:10

anubhava

790k67 gold badges603 silver badges671 bronze badges

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

5 Comments

Bangkokian Over a year ago

> "You should avoid parsing HTML using regex"... interesting. I never thought about that. Why?

Ravimallya Over a year ago

@Bangkokian 10 years old question! but the answers in this thread are still relevant IMO: stackoverflow.com/q/590747 .

Gbenga Medunoye Over a year ago

This is beautiful, just saved me hours

Frohlich Over a year ago

if you want to remove script tags and avoid loading malicious code before attaching them to the DOM, this approach is not valid. The answer from Nisarg, considering the comment from MattS may work better...

anubhava Over a year ago

@Frohlich: There are other safer ways to do that but using regex is definitely error prone for modifying HTML/XML.

Nisarg Shah · Accepted Answer · 2021-07-26 04:45:54Z

14

Here's the code. The regex /<a.*>.*?<\/a>/ig fits well for your data.

var myString = "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";

console.log(myString);

var anchorTagsRemoved = myString.replace(/<a.*?>.*?<\/a>/ig,'');
console.log(anchorTagsRemoved);

edited Jul 26, 2021 at 4:45

answered Jul 23, 2017 at 7:03

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

2 Comments

Rafique Mohammed Over a year ago

perfect,clean and simple.. 👌

MattS Over a year ago

To use on larger tags that span multiple lines, add a new line check. html.replace(/<header.*?>(.|\n|\r)*?<\/header>/ig,'');

Muhammad · Accepted Answer · 2017-07-23 07:50:44Z

1

var myString = "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";
myString += "<table><tr><td>Some text ...<a href='#'>label...</a></td></tr></table>";

el = document.createElement('div');
el.innerHTML = myString;

var output = document.getElementById('output');
el.querySelectorAll('a').forEach(function(item, index){
	item.parentNode.removeChild(item);
})
output.innerText = el.innerHTML;

<h3>Output:</h3>
<pre id='output'></pre>

edited Jul 23, 2017 at 7:50

answered Jul 23, 2017 at 7:35

Muhammad

7,4245 gold badges50 silver badges58 bronze badges

Collectives™ on Stack Overflow

Remove specific HTML tag with its content from javascript string

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related