0
64
ViewsMatch css custom properties with Regxr
I want to match CSS custom properties with the Regxr pattern.
So I tried with /^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/gim which works fine with normal characters, but when it comes to emoji or other language characters, it doesn't work as expected.
--monster-x: purple;
--monster-😃-x: red;
--monster-仮-x: blue;
Example:
How can I match all possible/supported CSS custom properties? Is there any doc for allowed/disallowed characters in CSS custom properties?
Thanks.
·
Juan Pablo Isaza
1 answers
Answer question0
You'll need to expand your character list ([]) using the following:
Emoji's
JavaScript regular expression for Unicode emoji
[\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}]
Chinese characters
Javascript unicode string, chinese character but no punctuation
[\u4E00-\u9FCC]
Combining those char lists with your existing one will give us the following regex:
^(\*?[-#\/\*\\\w\u{1f300}-\u{1f5ff}\u{1f900}-\u{1f9ff}\u{1f600}-\u{1f64f}\u{1f680}-\u{1f6ff}\u{2600}-\u{26ff}\u{2700}-\u{27bf}\u{1f1e6}-\u{1f1ff}\u{1f191}-\u{1f251}\u{1f004}\u{1f0cf}\u{1f170}-\u{1f171}\u{1f17e}-\u{1f17f}\u{1f18e}\u{3030}\u{2b50}\u{2b55}\u{2934}-\u{2935}\u{2b05}-\u{2b07}\u{2b1b}-\u{2b1c}\u{3297}\u{3299}\u{303d}\u{00a9}\u{00ae}\u{2122}\u{23f3}\u{24c2}\u{23e9}-\u{23ef}\u{25b6}\u{23f8}-\u{23fa}\u4E00-\u9FCC]+(\[[0-9a-z_-]+\])?)\s*
> Regex 101 Demo
·
Juan Pablo Isaza
Report
Answer question