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

score 23 · Accepted Answer · answered Jul 23 '17 at 07:10

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

> "You should avoid parsing HTML using regex"... interesting. I never thought about that. Why? — Bangkokian, Apr 05 '19 at 06:11
@Bangkokian 10 years old question! but the answers in this thread are still relevant IMO: https://stackoverflow.com/q/590747 . — Ravimallya, Aug 22 '21 at 03:48

Nisarg Shah · Answer 2 · 2021-07-26T04:45:54.667

13

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 '21 at 04:45

answered Jul 23 '17 at 07:03

Nisarg Shah

14,151
6
34
55

perfect,clean and simple.. – Rafique Mohammed Jul 25 '21 at 20:48
1

To use on larger tags that span multiple lines, add a new line check. html.replace(/(.|\n|\r)*?<\/header>/ig,''); – MattS Sep 27 '21 at 20:22

Muhammad · Answer 3 · 2017-07-23T07:50:44.110

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>

Remove specific HTML tag with its content from javascript string

3 Answers3

Linked

Related