Проверка ввода с помощью регулярных выражений в Safari - PullRequest
0 голосов
/ 02 мая 2018

Современные браузеры, включая Safari, поддерживают проверку шаблонов на входах , например:

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

Использует ли Unicode Categories что-то особенное?

Шаблон [\p{L}]{1,100} не работает в Safari, но работает в Chrome:

<!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>

1 Ответ

0 голосов
/ 02 мая 2018

ECMAScript TC39

Это похоже на другие проблемы, связанные со способностью Chrome обрабатывать взгляды в регулярном выражении, но другие браузеры не способны на то же самое. На данный момент это часть предложений Ecma TC39 в рамках предложения ECMAScript: свойство Юникода экранируется в регулярных выражениях . Его планируется включить в ES2018.

До сих пор это было реализовано в Chrome 64, Safari Preview 42 и regexpu (transpiler) по этой ссылке.

На данный момент существует несколько обходных путей для свойств Unicode в JavaScript (также описано в ссылке). Временные решения не работают для атрибута HTML5 pattern.

XRegExp

Используйте библиотеку, такую ​​как XRegExp , чтобы создавать регулярные выражения во время выполнения:

const regexGreekSymbol = XRegExp('\\p{Greek}', 'A');
regexGreekSymbol.test('π');
// → true

Недостатком этого подхода является то, что библиотека XRegExp является зависимость во время выполнения, которая не может быть идеальной для чувствительной к производительности Приложения. Для использования в Интернете существует дополнительное время загрузки снижение производительности: xregexp-all-min.js.gz занимает более 35 КБ пространство после минимизации и применения сжатия gzip. Всякий раз, когда Unicode Standard обновлен, новая версия 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 Standard обновлен, скрипт сборки должен быть обновлен и его результаты должны быть развернуты для использования последних доступных данных.


Я должен также добавить, что вы можете удалить [] из своего регулярного выражения: \p{L}{1,1000}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...