Regular Expression

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.

Solution

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>