Question

现代浏览器，包括Safari，support pattern validation on inputs，例如：

<input type="text" pattern="[a-z]+">

模式[\p{L}]{1,100}在Safari中不起作用，但适用于Chrome：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<body>
  <form>
    <!-- 
    "hello" should be a valid input
    works in chrome 66
    doesn't work in safari 11.1
    -->
    <input type="text" pattern="[\p{L}]{1,100}" name="bar" value="">
    <input type="submit">
  </form>
</body>
</html>

＆＃13;

Answer 1

ECMAScript TC39

这与其他涉及Chrome在正则表达式中处理lookbehinds的能力的问题类似，但其他浏览器无法做到这一点。目前，这是ECMAScript proposal: Unicode property escapes in regular expressions下Ecma TC39提案的一部分。它计划包含在ES2018中。

到目前为止，已经根据该链接在Chrome 64，Safari Preview 42和regexpu（transpiler）中实现了这一点。

目前JavaScript中的Unicode属性有几种解决方法（也在链接中描述）。变通办法不适用于HTML5 pattern属性。

XRegExp

使用XRegExp等库创建正则表达式在运行时：
const regexGreekSymbol = XRegExp('\\p{Greek}', 'A');
regexGreekSymbol.test('π');
// → true
这种方法的缺点是XRegExp库是一个运行时依赖性，可能不是对性能敏感的理想选择应用。要在Web上使用，还需要额外的加载时间性能损失：xregexp-all-min.js.gz占用超过35 KB 缩小并应用gzip压缩后的空间。每当 Unicode标准已更新，XRegExp的新版本必须是已发布和最终用户需要更新其XRegExp副本才能使用最新的可用数据。

重新生成

使用Regenerate等库生成常规库表达式在构建时：
const regenerate = require('regenerate');
const codePoints = require('unicode-9.0.0/Script/Greek/code-points.js');
const set = regenerate(codePoints);
set.toString();
// → '[\u0370-\u0373\u0375-\u0377\u037A-\u037D\u037F\u0384\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03E1\u03F0-\u03FF\u1D26-\u1D2A\u1D5D-\u1D61\u1D66-\u1D6A\u1DBF\u1F00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FC4\u1FC6-\u1FD3\u1FD6-\u1FDB\u1FDD-\u1FEF\u1FF2-\u1FF4\u1FF6-\u1FFE\u2126\uAB65]|\uD800[\uDD40-\uDD8E\uDDA0]|\uD834[\uDE00-\uDE45]'
// Imagine there’s more code here to save this pattern to a file.
这种方法可以获得最佳的运行时性能，尽管如此生成的正则表达式的大小往往相当大（其中可能导致网络上的加载时性能问题）。最大的缺点是它需要一个构建脚本，这会让人感到痛苦开发人员需要更多支持Unicode的正则表达式。每当更新Unicode标准，必须更新构建脚本及其必须部署结果才能使用最新的可用数据。

我还应该补充一点，您实际上可以从正则表达式中删除[]：\p{L}{1,1000}

在Safari中通过regexp输入验证

1 个答案:

ECMAScript TC39

XRegExp

重新生成