Question

我有一个段落，其innerHTML包含文本，其中一些包含单词作为锚链接。我想找出锚链接（不包含在锚标签中）中不包含的单词字符串匹配项，但是我正为RegExp苦苦挣扎，这是我的负面展望；

 <DatePicker
                label="With dateFormat YYYY-MM-DD"
                onChange={action('onChange')}
                dateFormat='YYYY-MM-DD' | 'YYYY-DD-MM' | 'YYYY-M-D'
            />

在遇到另一个锚定链接（即example(?!.+\</a>)）的开头时不会停止前瞻，因此所有单词都被视为都位于锚定标记内，因为最终总会有一个<a。

如何让RexExp负前瞻性查找</a>，但是遇到</a>时停下来。

https://regex101.com/r/HTOgkG/1

Answer 1

不要使用正则表达式来解析HTML，HTML太复杂了。

您说过您的起点是一个段落元素。这意味着您已经有了要搜索的内容的良好解析版本。在段落的子节点中查看“文本”节点：对于每个“测试”节点，请查看其是否包含所需的单词，然后查看其parentNode.tagName以查看其是否位于a中元素（也许遍历父母来处理<a href="#xyz"><span>target word</span></a>情况）。

例如，这里我的目标词是“示例”：

function findMatches(target, para, element = para) {
    let child = element.firstChild;
    while (child) {
        if (child.nodeType === 3 && child.nodeValue.includes(target)) {
            const a = child.parentNode.closest("a");
            if (!a || !para.contains(a)) {
                console.log(`Found in '${child.nodeValue}'`);
            }
        }
        child = child.nextSibling;
    }
}

findMatches("example", document.getElementById("theParagraph"));

<p id="theParagraph">This example matches, but <a href="#">this example</a> and <a href="#"><span>this example</span></a> don't match.

该示例使用了ES2015 +功能和现代浏览器功能，例如closest，但可以用ES5编写（closest可以被填充）。

Answer 2

<\s*a\s*[^<]*?>[^>]*>?<\s*\/a\s*>

the example
它只会删除<a></a>之间的所有内容，而不会删除标点符号。

[更新] 现在它不会被<a停止，也不会被<a> </a>

关闭

努力限制RegExp负前瞻

2 个答案: