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

我已經在 JavaScript問題的答案中檢查了從字符串的開頭到結尾刪除 HTML 內容組，但它適用於所有標簽。

謝謝

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

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

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>