Extract String In-between Div Tag with JavaScript

Question

Let's say I have a string that contains HTML code. Part of this code contains the preheader of an email. How would I extract the text in-between <div class="preheader" style="font-size: 1px; display: none !important;"> and closing </div>? Assume the opening and closing divs will always remain the same, only the content in-between changes.

some html preceding...
<div class="preheader" style="font-size: 1px; display: none !important;">Email preheader content</div>
some html following...

Does this answer your question? [Extract the text out of HTML string using JavaScript](https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript) — Heretic Monkey, Aug 17 '21 at 20:24

score 0 · Answer 1 · answered Aug 17 '21 at 21:13

If you have a string of html, you can turn it into a DocumentFragment which is just like a DOM. Then in this DOM you can select the element that you want to get the content of.

Here is an example:

const html = "your html code here";

const dom = document.createRange().createContextualFragment(html);
// create DocumentFragment

const preheader = dom.querySelector(".preheader"); // Select the element that contains the content

const content = preheader.textContent; // Extract the content

Extract String In-between Div Tag with JavaScript

1 Answers1