Get the content in the middle of two HTML comments

Question

I need to get the HTML content which is in the middle of two HTML comments. see the code:

<p>hello</p>
<!-- Write your comments here -->
<p>hello</p>
<!-- another comment -->

In this example, i need to get the <p>Hello</p>, how can i do this? with Regex? Thanks for reading.

Same as without the comments. Or do they serve as *start* and *stop* indicators for more than one node? — Lain, Aug 17 '20 at 20:28
@Lain — How can you find content between two comments if there are no comments there? — Quentin, Aug 17 '20 at 20:29
ok, but, what is "same"? the comment not is a div, what i can do a innerHTML, i tried this. — Ederson Ferreira, Aug 17 '20 at 20:29
@lain Yes, the comment start and stop in itself, this is the problem. — Ederson Ferreira, Aug 17 '20 at 20:31
Leave this here on reg exp: https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags — epascarello, Aug 17 '20 at 20:52

score 0 · Answer 1 · answered Aug 17 '20 at 20:39

You can use the XPath expression //comment() to find the comments, loop over them to find the ones you care about, then loop over the nodes from the first until you find the second.

const comments = document.evaluate("//comment()", document);
let start;
let end;
while (comment = comments.iterateNext()) {
  if (comment.data.trim() === "Write your comments here") {
    start = comment;
  }
  if (comment.data.trim() === "another comment") {
    end = comment;
  }
}

let current = start.nextSibling;
let matches = [];
while (current !== end) {
  matches.push(current);
  current = current.nextSibling;
}

console.log(matches.map(node => node.textContent));

<p>hello</p>
<!-- Write your comments here -->
<p>hello</p>
<!-- another comment -->

Note that this will break if the comments are not siblings, and I've not put any error handling in place.

Thanks, now i will adapt this code to run in other html contents, Thanks! — Ederson Ferreira, Aug 17 '20 at 20:46

score 0 · Accepted Answer · answered Aug 17 '20 at 20:50

You can use childNodes and look at the Node type.

function getNodesBetweenComments (wrapper) {
  var state = 0;
  return Array.from(wrapper.childNodes).filter(node => {
    if (node.nodeType === 8) state++;
    else return state === 1 && node.nodeType === 1
  })
}

const wrapper = document.querySelector("#wrapper");
console.log(getNodesBetweenComments(wrapper));


const wrapper2 = document.querySelector("#wrapper2");
console.log(getNodesBetweenComments(wrapper2));

<div id="wrapper">
  <p>hello</p>
  <!-- Write your comments here -->
  <p>hello</p>
  <!-- another comment -->
</div>

<div id="wrapper2">
  <p>hello</p>
  <!-- Write your comments here -->
  <p>hello</p>
  <p>there</p>
  <p>world</p>
  <!-- another comment -->
</div>

Get the content in the middle of two HTML comments

2 Answers2