JS：在字符串中的注释之间获取 HTML答案

【问题标题】：JS: Get HTML between comments in a stringJS：在字符串中的注释之间获取 HTML
【发布时间】：2019-11-13 20:39:15
【问题描述】：

所以，我有这个 HTML

<div contenteditable="true">
  <div class="parent-wrap">
    <!-- RAW start -->
    <p>Lorem</p>
    <p>Ipsum</p>
    <div>Dolor sit amet</div>
    <!-- RAW end -->
  </div>
  <a href="#">Read more</a>
</div>

我需要获取两个 html cmets 之间的 html（没有 cmets 本身），因此只需 2 个<p> 和<div>Dolor sit amet</div>。我直接从带有innerHTML 的页面获取html。

这是我的 JS：

getValue () {
  let html = editor.innerHTML
  let rawStart = '<!-- RAW start -->'
  let rawEnd = '<!-- RAW end -->'
  if (html.search(rawStart) && html.search(rawEnd)) {
    html = html.split(rawStart).pop().split(rawEnd)[0]
  }
  return html
}

它有效，但我想知道是否有更好的方法？这也适用于任何地方吗？或者有没有修改html cmets的浏览器（例如删除空格）？

【问题讨论】：

标签： javascript html comments

【解决方案1】：

您可以在一个 for 循环中使用 editor.children 而不是使用 .innerHTML，该循环像这样连接子节点上的所有 outerHTML 属性。

<div contenteditable="true">
  <div class="parent-wrap">
    <!-- RAW start -->
    <p>Lorem</p>
    <p>Ipsum</p>
    <div>Dolor sit amet</div>
    <!-- RAW end -->
  </div>
  <a href="#">Read more</a>
</div>

function getValue() {
  let div = document.querySelector('.parent-wrap');
  let html = '';
  for(let i=0; i < div.children.length; i++) {
    html += div.children[i].outerHTML
  }
  return html;
}

【讨论】：