为什么正则表达式在 javascript 中工作而不是 HTML5 模式

Question

以下 JS 正则表达式按预期工作

/^(?:(?:\(?(?:00|\+)([1-4]\d\d|[1-9]\d+)\)?)[\-\.\ \\\/]?)?((?:\(?\d{1,}\)?[\-\.\ \\\/]?){0,})(?:[\-\.\ \\\/]?(?:#|ext\.?|extension|x)[\-\.\ \\\/]?(\d+))?$/i

但是当我将其用作 HTML 5 模式时，我得到了这个错误：

Pattern attribute value /^(?:(?:(?(?:00|+)([1-4]dd|[1-9]d+))?)[-. \/]?)?((?:(?d{1,})?[-. \/]?){0,})(?:[-. \/]?(?:#|ext.?|extension|x)[-. \/]?(d+))?$/i is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: //^(?:(?:(?(?:00|+)([1-4]dd|[1-9]d+))?)[-. \/]?)?((?:(?d{1,})?[-. \/]?){0,})(?:[-. \/]?(?:#|ext.?|extension|x)[-. \/]?(d+))?$/i/: Invalid group

浏览器告诉我这个“未捕获的语法错误：无效的正则表达式。无效的组”

任何帮助将不胜感激，因为正则表达式不是我真正的强项。

Answer 1

从示例复制的 JS 正则表达式输入：

/^(?:(?:\(?(?:00|\+)([1-4]\d\d|[1-9]\d+)\)?)[\-\.\ \\\/]?)?((?:\(?\d{1,}\)?[\-\.\ \\\/]?){0,})(?:[\-\.\ \\\/]?(?:#|ext\.?|extension|x)[\-\.\ \\\/]?(\d+))?$/i

HTML5 正则表达式错误 output 复制自示例：

//^(?:(?:(?(?:00|+)([1-4]dd|[1-9]d+))?)[-. \/]?)?((?:(?d{1,})?[-. \/]?){0,})(?:[-. \/]?(?:#|ext.?|extension|x)[-. \/]?(d+))?$/i/

从外观上看，javascript 正在读取您的反斜杠，就好像它们是 escaping 字符一样。

从 JS 示例到 HTML 错误：

• \d\d变成dd

• 任何没有可识别转义字符（如 d、另一个反斜杠等）的单个反斜杠都会被删除。

如果您查看输入和产生的错误，还有更多示例。

如果您使用 JS 将此模式作为字符串传递给 html DOM，则需要转义反斜杠。 每当您的模式需要反斜杠时，您需要将其中的 2 个放在字符串中。 第一个反斜杠告诉解释器，第二个反斜杠是文本的一部分，而不是转义序列。 如果模式存储在标签中，例如您的示例，并且您正在使用 JS 访问它，您仍然希望通过将它们替换为\\来转义您的\ 。

Answer 2

正则表达式和正则表达式字符串是两个不同的东西。

正则表达式示例：

/[a-zA-Z\d]+/.test('abc123')

等效的正则表达式字符串示例：

new RegExp('[a-zA-Z\\d]+').test('abc123')

字符串中的反斜杠转义后面的字符。 对于许多字符，它是无操作的，如在'\d'字符串中，它等价于'd' 。 因此，您需要指定一个双反斜杠来获取可以在正则表达式字符串中使用的\d来表示数字。

HTML5 中用于验证输入的示例：

<input type="text" name="uname" pattern="[a-zA-Z\d]+" minlength="4" maxlength="10" />

因此，在您的情况下，请确保转义正则表达式字符串中的反斜杠：

"^(?:(?:\\(?(?:00|\\+)...

在模式属性中，您不能指定修饰符i忽略大小写，例如，您需要调整正则表达式字符串本身以不区分大小写。

关于 HTML 模式属性的文档： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern