Question

我有一个像这样的字符串

<span title="use a <label>">Some Content</span>
<span title="use a <div>">Some Other Content</span>

我需要一个正则表达式来使Some Content或Some Other Content忽略标签，即使标签中包含其他标签

Answer 1

使用document parser和DOM方法获取内容，而不是正则表达式。正则表达式绝对是这项工作的错误工具。即使您可以获得正则表达式，也很难理解并且非常脆弱。接下来的解决方案更加健壮，更易于理解和调试。

首先创建一个解析器并解析文档片段：

var parser = new DOMParser();
var doc = parser.parseFromString(
    '<span title="use a <label>">Some Content</label><span title="use a <div>">Some Other Content</label>',
    "text/html");

您可以通过检查doc.documentElement来查看结果，这将为我们提供：

<html>
    <head></head>
    <body>
        <span title="use a <label>">
            Some Content
            <span title="use a <div>">
                Some Other Content
            </span>
        </span>
    </body>
</html>

由于标签未正确关闭，因此解析起来很奇怪，但这并不重要。文本内容仍然是内容。

接下来，我们使用document walker提取所有文本节点。您可以使用createTreeWalker并传入NodeFilter.SHOW_TEXT创建新的助行器：

var walker = doc.createTreeWalker(
    doc.documentElement,    // root
    NodeFilter.SHOW_TEXT,   // what to show
    null,                   // filter
    false);                 // reference expansion

然后我们可以走树并收集所有走过的节点：

var node;
var textNodes = []; 
while (node = walker.nextNode()) {
    textNodes.push(node);
}

最后，我们得到所需的数组：

var content = textNodes.map(x => x.textContent);

Content是一个包含["Some Content", "Some Other Content"]（所需结果集）的数组。

Answer 2

也许你会有所想法。

正则表达式：“>（。*）

Match 1
Full match  26-42   ">Some Content</
Group 1.    n/a Some Content
Match 2
Full match  73-95   ">Some Other Content</
Group 1.    n/a Some Other Content

https://regex101.com/r/6VArPY/1

Answer 3

我们可能只使用一个简单的表达式并收集所需的textContents，也许使用：

">(.+?)<\/

我们的数据保存在(.+?)捕获组中。

const regex = /">(.+?)<\//gm;
const str = `<span title="use a <label>">Some Content</label>
<span title="use a <div>">Some Other Content</label>`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

DEMO

RegEx

如果不需要此表达式，可以在regex101.com中对其进行修改或更改。

RegEx电路

jex.im可视化正则表达式：

RegEx用于匹配具有特定属性的HTML标签

3 个答案:

DEMO

RegEx

RegEx电路