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



我在试图弄清楚这个正则表达式代码时遇到了问题。让我展示一下代码,然后解释一下。

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

因此regex应该解析并只返回以下行:

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

Turpis nunc eget lorem dolor sed viverra ipsum nunc。砂矿重力。Viverra maecenas指责她很肤浅

也因为它将用于解析HTML,所以我需要它忽略完全空的空格。我的意思是

</div>
</div>

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

我不确定这是否可能。我希望这是有意义的,任何帮助都将不胜感激!

编辑:

使用NodeJS

我正在尝试从MD文件(Github markdown文件(解析为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>

据我所知,您已经从这样的解析器生成了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>`;

并且你想要将每个";裸的";CCD_ 4在其自己的CCD_。

如果您熟悉jQuery,这是一个简单的操作。选择目标节点,调用.wrap('<p>')。Cheerio在节点中相当于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>

当然,您也可以使用常规DOM解析器(如jsdom(来做同样的事情,只需多做一点跑腿工作,如下所示:

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

最新更新