Regular Expression

Question

I've needed to display an alert in case there's a text input includes a double-quote which isn't followed by a backslash. So I used 'negative lookbehind' regular expression and achieved that goal.

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

" -> Alert
\\" -> OK

However, I found an issue that when users put an indent into text box, the WYSIWYG (Quill) generates a class named "ql-indent-N (indent level starting from 1)" which triggers an alert by " detection.

Thus, I added another exception to the original regular expression like below.

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

But it didn't work so I tried some tests in console, and saw that

it works fine when I just put
class="
-> OK

while, it does not work when it's inside real tag like
<p class="ql-indent-1"> text </p>
-> Alert

How can I make a lookbehind reg exp working fine with those <p class=" ...">? Or any other generous suggestion to achieve the same goal — Displaying an alert to double-quotes not followed by a backslash nor by <p class=" ...">? Below is a basic structure of the textbox.

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

Dealing Quill's delta format is very complicated.

Answer 1

As mentioned in the comment, you could refer to the element innerText rather than its innerHTML in order to ignore any tag inserted by the WYSIWYG editor.

Example (here I am using RegExp.prototype.test() rather than 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>