HTML5 input pattern正则表达式如何支持德语变音符号？

要让HTML输入框仅允许特定字符（包括德语变音符号Ä、Ö、Ü、ä、ö、ü），尝试过以下两种pattern写法：

第一种：

<input pattern="[a-zA-Z0-9-#@.+_ \ä\ö\ü\Ä\Ö\Ü]" type="text" value="">

第二种：

<input pattern="[a-zA-Z0-9-#@.+_ äöüÄÖÜ]" type="text" value="">

在Chrome浏览器中触发报错：

Pattern属性值[a-zA-Z0-9-#@.+_ \ä\ö\ü\Ä\Ö\Ü]不是有效的正则表达式：Uncaught SyntaxError: Invalid regular expression: /[a-zA-Z0-9-#@.+_ \ä\ö\ü\Ä\Ö\Ü]/: Invalid escape

正确写法及原因 #

问题出在正则的转义逻辑上：

• 德语变音符号属于普通字符，在正则字符集[]中不需要添加反斜杠转义，错误转义反而会导致语法错误；
• 而.、-、+这些字符在正则中有特殊含义，需要添加反斜杠进行转义；
• 同时要加上*修饰符，允许输入零个或多个符合规则的字符。

最终正确的pattern写法如下：

<input pattern="[a-zA-Z0-9\.\-\+ äöüÄÖÜ]*" type="text" value="">

内容的提问来源于stack exchange，提问作者Avatar