javascript - 从字符串中删除 HTML 标签及其内容 - Javascript

Question

假设我有以下字符串: const test = "This is outside the HTML tag. <title>How to remove an HTML element using JavaScript ?</title>";

我想删除该字符串中所有 HTML 标记内的内容。我试过做 test.replace(/(<([^>]+)>)/gi, '') ，但这只会删除 HTML 标签，而不是其中的所有内容。我希望结果只是“这是在 HTML 标记之外。”。

是否可以删除字符串中的 HTML 标签及其内容？

Answer 1

与尝试通过正则表达式删除 HTML 元素相比，使用以下方法创建和填充 DOM 片段要简单得多:

let myDiv = document.createElement('div');
myDiv.innerHTML = test;

然后删除 <title>元素，使用:

myDivTitle = myDiv.querySelector('title');
myDiv.removeChild(myDivTitle);

---

工作示例(一个元素):

const test = "This is outside the HTML tag. <title>How to remove an HTML element using JavaScript ?</title>";

let myDiv = document.createElement('div');
myDiv.innerHTML = test;
myDivTitle = myDiv.querySelector('title');
myDiv.removeChild(myDivTitle);
const testAfter = myDiv.innerHTML;
console.log(testAfter);

---

上述内容适用于一个元素( <title> )，但您指出:

I'd like to remove the content within all HTML tags in that string

所以让我们尝试一些更雄心勃勃的事情，使用:

myDiv.querySelectorAll('*')

---

工作示例(所有元素):

const test = "<title>How to remove an HTML element using JavaScript ?</title> This is outside the HTML tag. <h1>Here we go...</h1> So is this. <p>This is going to save a lot of time trying to come up with regex patterns</p> This too.";

let myDiv = document.createElement('div');
myDiv.innerHTML = test;
myDivElements = myDiv.querySelectorAll('*');

for (let myDivElement of myDivElements) {
  myDiv.removeChild(myDivElement);
}

const testAfter = myDiv.innerHTML;
console.log(testAfter);