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

IT技术 javascript html regex dom
2021-03-16 07:03:37

我有以下字符串变量，我想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>";

我已经在 JavaScript问题的答案中检查了从字符串的开头到结尾删除 HTML 内容组，但它适用于所有标签。

谢谢

3个回答

您应该避免使用正则表达式解析 HTML。这是一种<a>使用以下方法删除所有标签的方法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>
*/

@Bangkokian 10 岁的问题！但该线程中的答案仍然与 IMO 相关：stackoverflow.com/q/590747。
2021-04-27 07:03:37
> “你应该避免使用正则表达式解析 HTML”......有趣。我从来没想过那个。为什么？
2021-04-28 07:03:37

这是代码。正则表达式/<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);

完美，干净，简单..👌
2021-05-18 07:03:37
要在跨越多行的较大标签上使用，请添加新行检查。html.replace(/<header.*?>(.|\n|\r)*?<\/header>/ig,'');
2021-05-18 07:03:37 

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>

其它你可能感兴趣的问题
上一篇如果提交以编程方式启动，则不会触发提交事件 下一篇为什么用 < 对 JS 数字数组进行排序？