正则表达式 - 获取 > 和 < 之间的所有文本，但如果介于 > </ 之间则不获取文本

Question

我在试图找出这个正则表达式代码时遇到问题。让我展示一下代码，然后再解释一下。

<div class="test">
    Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et
    malesuada.
    <button class="button">Feugiat nisl pretium fusce id velit.</button>
    Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum
    fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis.
 </div>

所以我试图让正则表达式介于 > 和 <button class="button">Feugiat nisl pretium fusce id velit.</button>

所以正则表达式应该解析这个并只返回这些行：

Nisl rhoncus mattis rhoncus urna neque viverra。 Senectus et netus et malesuada。

Turpis nunc eget lorem dolor sed viverra ipsum nunc。 Gravida dictum fusce ut placerat。 Viverra maecenas accumsan lacus vel facilisis。

还因为它将用于解析 HTML，我需要它来忽略完全空白的空间。我的意思是

   </div>
</div>

从技术上讲，两者之间的空格是有效的，但我不想捕获空格，除非包含文本而不仅仅是空格。想象一下在 HTML 之间获取段落。这个想法是获取 divs 之间的所有文本，然后用 <p> 包裹它，但是某些情况下，例如按钮，里面不应该有 <p>。

我不确定这是否可能。我希望这是有道理的，任何帮助都将不胜感激！

编辑：

使用 NodeJS

我正在尝试将 MD 文件（Github 降价文件）解析为 HTML，并在自定义语法之间有一个中间步骤，如下所示：

[flipcard]
[front color:blue]
Morbi tristique senectus et netus et malesuada. Interdum consectetur libero id faucibus nisl tincidunt. Purus faucibus ornare suspendisse sed nisi. Laoreet id donec ultrices tincidunt arcu. Elementum pulvinar etiam non quam lacus suspendisse faucibus.
[/front]
[back]
Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et malesuada.
[button]Feugiat nisl pretium fusce id velit.[/button] Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis. Nascetur ridiculus mus mauris vitae ultricies leo integer. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Velit laoreet id donec ultrices.[/back] 
[/flipcard]

它几乎就像自定义 HTML，但在 markdown 文件中，然后将使用我的自定义解析器转换为这个，一旦我的解析器完成，我通过 NodeJS Marked 解析器运行它以捕获剩余的 markdown 元素。然后我得到这个：

 <div class="flipcard">
      <div class="front" style="color: blue">
        Morbi tristique senectus et netus et malesuada. Interdum consectetur
        libero id faucibus nisl tincidunt. Purus faucibus ornare suspendisse sed
        nisi. Laoreet id donec ultrices tincidunt arcu. Elementum pulvinar etiam
        non quam lacus suspendisse faucibus.
      </div>
      <div class="back">
        Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et
        malesuada.
        <button class="button">Feugiat nisl pretium fusce id velit.</button>
        Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum
        fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis.
        Nascetur ridiculus mus mauris vitae ultricies leo integer. Pellentesque
        pulvinar pellentesque habitant morbi tristique senectus et netus. Velit
        laoreet id donec ultrices.
      </div>
    </div>

这非常接近我的需要，但我需要最终输出是这样的：

<div class="flipcard">
      <div class="front" style="color: blue">
        <p>
          Morbi tristique senectus et netus et malesuada. Interdum consectetur
          libero id faucibus nisl tincidunt. Purus faucibus ornare suspendisse
          sed nisi. Laoreet id donec ultrices tincidunt arcu. Elementum pulvinar
          etiam non quam lacus suspendisse faucibus.
        </p>
      </div>
      <div class="back">
        <p>
          Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et
          malesuada.
        </p>
        <button class="button">Feugiat nisl pretium fusce id velit.</button>
        <p>
          Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum
          fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis.
          Nascetur ridiculus mus mauris vitae ultricies leo integer.
          Pellentesque pulvinar pellentesque habitant morbi tristique senectus
          et netus. Velit laoreet id donec ultrices.
        </p>
      </div>
    </div>

Answer 1

据我了解，您有这样的解析器生成的 HTML：

var htmlFragment = `<div class="flipcard">
  <div class="front" style="color: blue">
    Morbi tristique senectus et netus et malesuada. Interdum consectetur
    libero id faucibus nisl tincidunt. Purus faucibus ornare suspendisse sed
    nisi. Laoreet id donec ultrices tincidunt arcu. Elementum pulvinar etiam
    non quam lacus suspendisse faucibus.
  </div>
  <div class="back">
    Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et
    malesuada.
    <button class="button">Feugiat nisl pretium fusce id velit.</button>
    Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum
    fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis.
    Nascetur ridiculus mus mauris vitae ultricies leo integer. Pellentesque
    pulvinar pellentesque habitant morbi tristique senectus et netus. Velit
    laoreet id donec ultrices.
  </div>
</div>`;

并且您想将div.flipcard > div 的每个“裸”文本节点子节点包装在其自己的<p> 中。

如果您熟悉 jQuery，那么这是一个简单的操作。选择目标节点，调用.wrap('<p>')。 Cheerio 是 node 中的 jQuery 等价物，所以如果你想要同样的便利，你可以拥有它：

const cheerio = require('cheerio');

$doc = cheerio.load('<div>' + htmlFragment + '</div>');

$doc.find('div.flipcard > div').contents().filter(function () {
    return this.nodeType === this.TEXT_NODE;
}).wrap("<p>");

console.log($doc.html());

打印这个：

<div class="flipcard">
  <div class="front" style="color: blue"><p>
    Morbi tristique senectus et netus et malesuada. Interdum consectetur
    libero id faucibus nisl tincidunt. Purus faucibus ornare suspendisse sed
    nisi. Laoreet id donec ultrices tincidunt arcu. Elementum pulvinar etiam
    non quam lacus suspendisse faucibus.
  </p></div>
  <div class="back"><p>
    Nisl rhoncus mattis rhoncus urna neque viverra. Senectus et netus et
    malesuada.
    </p><button class="button">Feugiat nisl pretium fusce id velit.</button><p>
    Turpis nunc eget lorem dolor sed viverra ipsum nunc. Gravida dictum
    fusce ut placerat. Viverra maecenas accumsan lacus vel facilisis.
    Nascetur ridiculus mus mauris vitae ultricies leo integer. Pellentesque
    pulvinar pellentesque habitant morbi tristique senectus et netus. Velit
    laoreet id donec ultrices.
  </p></div>
</div>

当然，您可以使用诸如jsdom 之类的常规 DOM 解析器来做同样的事情，只需稍微多做一些工作即可：

document.querySelectorAll('div.flipcard > div').forEach(div => {
    for (let i = div.childNodes.length - 1; i >= 0; i--) {  // work from the end so we don't mess up the index
        let child = div.childNodes[i];
        if (child.nodeType == child.TEXT_NODE) {            // if we're at a text node
            let p = document.createElement('P');            // create `<p>`
            div.insertBefore(p, child.nextSibling);         // append that after the text node
            p.appendChild(child);                           // move the text node into the `<p>`
        }
    }
});