Estoy usando la siguiente expresión regular en JavaScript para validar un campo de entrada:
<textarea id="kpf-message-textarea" class="message-area" name="message" maxlength="1000" aria-describedby="kpf-message-extra-text" aria-invalid="true" tabindex={this.kpfTabindex} value={this.message} onInput={(event) => this._handleChange(event)}> </textarea> this.message.match(/^([A-Za-z]|[0-9]| [ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ]|[ \\.^°!"²§³$%&\/\\{\\}\\ (\\)=?´`@€+-\\*~'#<>|µ,;:_<CR><LF>]|[\n])+$/)Para el siguiente patrón con 30 letras mayúsculas y un carácter no válido, hace que el navegador se cuelgue y solo cerrarlo y volver a abrirlo ayuda:
ABCDEFGHIJKLMNOPAAAAAAAAAAAAAA¼¿Qué pasa aquí?
El patrón se agota debido a un retroceso catastrófico .
No puede coincidir con el carácter ¼ al final, y aún intentará explorar (retroceder) todos los caminos. Con el grupo repetitivo externo y las alternancias dentro de ese grupo, hay muchas opciones.
Usar [<CR><LF>] en la clase de caracteres es lo mismo que [><CFLR] Si desea hacer coincidir un retorno de carro o un avance de línea, puede usar \r\n
A medida que usa la alternancia | para todas las coincidencias de un solo carácter (clases de caracteres sin cuantificador), puede fusionar todas las clases de caracteres en una sola clase de caracteres y repetir la clase de caracteres 1 o más veces.
^[A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ \\.^°!"²§³$%&/{} ()=?´`@€+*~'#<>|µ,;:_\r\n-]+$Demostración de expresiones regulares
Un ejemplo simplificado:
function handleChange() { let elm = document.getElementById("kpf-message-textarea"); if (/^[A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ \\.^°!"²§³$%&/{} ()=?´`@€+*~'#<>|µ,;:_\r\n-]+$/.test(elm.value)) { console.log("Match: " + elm.value); } else { console.log("No match: " + elm.value); } } <textarea id="kpf-message-textarea" class="message-area" name="message" maxlength="1000" aria-invalid="true" onInput=handleChange()> </textarea>