JavaScript 正則表達式凍結瀏覽器

Question

我在 JavaScript 中使用以下正則表達式來驗證輸入字段：

    <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])+$/)

對於以下 30 個大寫字母和 1 個無效字符的模式，它會導致瀏覽器掛起，只有再次關閉和打開瀏覽器才有幫助：

      ABCDEFGHIJKLMNOPAAAAAAAAAAAAAA¼

這里有什么問題？

Answer 1

由於災難性的回溯，該模式超時。

它無法匹配末尾的字符¼ ，它仍然會嘗試探索（回溯）所有路徑。 對於外部重復組和該組內的交替，有很多選擇。

在字符類中使用[<CR><LF>]與[><CFLR]如果要匹配回車或換行，可以使用\\r\\n

當您使用交替時| 對於所有單字符匹配（沒有量詞的字符類），您可以將所有字符類合並為一個字符類並重復該字符類 1 次或多次。

^[A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ \\.^°!"²§³$%&/{} ()=?´`@€+*~'#<>|µ,;:_\r\n-]+$

正則表達式演示

一個簡化的例子：

 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>