I have given html and these two functions. Idea is I need to display alert when user type non latin characters
<div id="card-personalize-text" contenteditable="true" spellcheck="false" placeholder="Type your message here..." maxlength="260">Type your message here...</div>
$("#card-personalize-text").on('change keyup', function () { if (!unsupportedCharsAlertShown && checkDoesTextIncludesUnexpectedCharacters($(this).text())) { alert(unsupportedCharsMessage); unsupportedCharsAlertShown = true; } });
function checkDoesTextIncludesUnexpectedCharacters(text) { console.log(text); console.log(!/^[A-Za-z0-9\/?!.:(){}]*$/.test(text)); return !/^[A-Za-z0-9\/?!.:(){}]*$/.test(text);}
For some reason checkDoesTextIncludesUnexpectedCharacters
return true all of the time.For example when type text 'Test' in #card-personalize-text1st console log print 'Text'2nd print true
What is strange if I Hardcode text when call function, for exampleif (!unsupportedCharsAlertShown && checkDoesTextIncludesUnexpectedCharacters('Test'))
checkDoesTextIncludesUnexpectedCharacters
work and return false.
Stack Snippet:
let unsupportedCharsAlertShown = false;const unsupportedCharsMessage = "Unsupported character!";$("#card-personalize-text").on('change keyup', function () { if (!unsupportedCharsAlertShown && checkDoesTextIncludesUnexpectedCharacters($(this).text())) { alert(unsupportedCharsMessage); unsupportedCharsAlertShown = true; }});function checkDoesTextIncludesUnexpectedCharacters(text) { console.log(text); console.log(!/^[A-Za-z0-9\/?!.:(){}]*$/.test(text)); return !/^[A-Za-z0-9\/?!.:(){}]*$/.test(text);}
<div id="card-personalize-text" contenteditable="true" spellcheck="false" placeholder="Type your message here..." maxlength="260">Type your message here...</div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>