从Javascript字符串中删除特定的HTML标签及其内容

Question

我有以下字符串变量，我想从字符串中删除所有的a标签及其内容。

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>";

我已经检查了这个Remove HTML content groups from start to end of string in JavaScript问题的答案，但它适用于所有标签。

谢谢

谢谢

- Gulmuhammad Akbari

Answer 1

使用正则表达式解析HTML应该避免。以下是使用DOM的一种方法来删除所有 <a> 标签：

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

- anubhava

---

避免使用正则表达式解析HTML...有趣。我从来没有想过为什么要避免？ - Bangkokian

@Bangkokian 十年老问题！但我认为这个线程中的答案仍然相关：https://dev59.com/unRB5IYBdhLWcg3wiHz7。 - Ravimallya

这太棒了，刚刚为我节省了好几个小时。 - Medunoye Laxus Gbenga

Answer 2

这是代码。正则表达式/<a.*>.*?<\/a>/ig很适合您的数据。

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

- Nisarg Shah

---

完美、简洁、简单。 - Rafique Mohammed

为了在跨越多行的较大标签上使用，请添加新的换行检查。html.replace(/<header.?>(.|\n|\r)?</header>/ig,''); - MattS

Answer 3

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>

- Muhammad