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

Question

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

I'd like to remove the content within all HTML tags in that string. I have tried doing test.replace(/(<([^>]+)>)/gi, '') , but this only removes the HTML tags rather than all the content within it as well. I would expect the outcome to only be 'This is outside the HTML tag.'.

Is it possible to remove HTML tags and its contents within a string?

Answer 1

You can replace everything between the two elements by putting a Wildcard character between two of your regex

 const test = "This is outside the HTML tag. <title>How to remove an HTML element using JavaScript?</title>"; console.log(test.replace(/(<([^>]+)>).*(<([^>]+)>)/, ''))

Answer 2

Rather than trying to remove the HTML element via Regex, it's much more straightforward to create and populate a DOM Fragment using:

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

and then remove the <title> element from that, using:

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

---

Working Example (One Element):

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

---

The above works for one element ( <title> ) but you stated:

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

so let's try something more ambitious, using:

myDiv.querySelectorAll('*')

---

Working Example (All Elements):

 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 (myDivElement of myDivElements) { myDiv.removeChild(myDivElement); } const testAfter = myDiv.innerHTML; console.log(testAfter);

Answer 3

You should try like this:

var html = "<p>Hello, <b>Frields</b>";
var div = document.createElement("div");
div.innerHTML = html;
alert(div.innerText); // Hello, Frields