正则表达式

Question

我需要显示警报，以防文本输入包含双引号且后面没有反斜杠。 所以我使用了“负回顾”正则表达式并实现了这个目标。

text.innerHTML.match(/(?<!\\)\"/);

" -> 警报
\\" -> 好的

但是，我发现了一个问题，当用户在文本框中输入缩进时，所见即所得（Quill）会生成一个名为“ql-indent-N（缩进级别从 1 开始）”的类，该类会通过“检测”触发警报。

因此，我在原始正则表达式中添加了另一个例外，如下所示。

text.innerHTML.match(/(?<!\\)(?<!class=)\"/);

但它不起作用所以我在控制台中尝试了一些测试，然后看到了

当我刚放的时候它工作正常
类=“
-> 好的

同时，当它在真实标签中时它不起作用
<p class="ql-indent-1"> 文字</p>
-> 警报

我怎样才能让后视 reg exp 与那些 <p class=" ..."> 一起工作正常？ 或者任何其他实现相同目标的慷慨建议 - 显示双引号的警报，后面没有反斜杠也没有 <p class=" ...">？ 下面是文本框的基本结构。

<div class="ql-editor" data-gramm="false" contenteditable="true">
<p>text</p>
</div>

处理 Quill 的 delta 格式非常复杂。

Answer 1

如评论中所述，您可以引用元素innerText而不是其innerHTML以忽略 WYSIWYG 编辑器插入的任何标记。

示例（这里我使用的是RegExp.prototype.test()而不是RegExp.prototype.match() ）

 const qEditor = document.querySelector('.ql-editor'); const re = /(?<!\\\\)"/gm; qEditor.addEventListener('input', () => { if (re.test(qEditor.innerText)){ window.alert('All double-quotes (") must be escaped (\\\\")'); } })

 <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <div id="editor" class="ql-editor" data-gramm="false" contenteditable="true"> <p>text</p> </div> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <script> var quill = new Quill('#editor', { theme: 'snow' }); </script>