使用javascript字符串中的内容删除特定的HTML标记

时间:2017-07-23 06:48:15

标签: javascript html dom

我有以下字符串变量,我想从字符串中删除所有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个问题的答案,但它适用于所有代码。

谢谢

3 个答案:

答案 0 :(得分:5)

您应该避免使用正则表达式解析HTML。以下是使用<a>删除所有DOM代码的方法:

&#13;
&#13;
// 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>
*/
&#13;
&#13;
&#13;

答案 1 :(得分:4)

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

&#13;
&#13;
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);
&#13;
&#13;
&#13;

答案 2 :(得分:0)

&#13;
&#13;
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;
&#13;
<h3>Output:</h3>
<pre id='output'></pre>
&#13;
&#13;
&#13;