正则表达式负前瞻仅匹配一个字符

Question

我写了一个正则表达式，它应该匹配除<span style="background-color: #any-color">和</span>之外的所有危险HTML字符：

((?!<span style="background-color: #([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})">|<\/span>)[&<>"'/])

但是，它与我排除的多余字符匹配。
此处RegEx不应与引号style="background-color:匹配，但应匹配：

我在哪里弄错了？

请参见Regex101 demo。这是link to the current project：

function escapeHtml(in_) {
    return in_.replace(/((?!<span style="background-color: #([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})">|<\/span>)[&<>"'/])/g, s => {
        const entityMap = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            '\'': '&#39;',
            '/': '&#x2F;',
        };

        return entityMap[s];
    });
}

Answer 1

请注意，只有当您完全控制纯文本字符串中显示的实体时，才可以使用正则表达式。

因此，如果您像字符串一样手动添加</span>和<span style="background-color: #aaff11">，则可以这样修改代码：

function escapeHtml(in_) {
	return in_.replace(/(<span style="background-color: #(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})">|<\/span>)|[&<>"'\/]/g, ($0,$1) => {
		const entityMap = {
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
			'"': '&quot;',
			'\'': '&#39;',
			'/': '&#x2F;',
		};
		return $1 ? $1 : entityMap[$0];
	});
}
console.log(escapeHtml('<b>some test <span style="background-color: #333300">ol string!</b></span> nope <i>whoops</i> <span style="background-color: #ff0000">meh</span>'));

否则，您需要考虑DOM解析方法。参见Parse an HTML string with JS。