正則表達式

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>