i18n Special Character Escaper
Automatically handle special character escaping in i18n translation files, supporting both JSON and plain text formats, fixing parsing errors caused by curly braces, @ symbols, etc.
i18n Special Character Escaping Rules
1. Curly Braces { }
Reason: {key} is placeholder syntax
Method: {'{'} and {'}'}
2. @ Symbol
Reason: @:path.to.key is linking syntax
Method: {'@'}
3. Dollar Sign $
Reason: $ might be used as special variable or list syntax
Method: {'$'}
4. Pipe Symbol |
Reason: | is a separator for pluralization
Method: {'|'}
Technical Background
i18n libraries typically compile JSON strings into functions to support argument interpolation and pluralization. Any character with special syntax (like {}, @, |) must be escaped if it is intended to be displayed literally; otherwise, the compiler may misinterpret it as a control instruction, causing parsing errors or application crashes.
Security Advice
To avoid all issues, it's recommended to escape all parentheses to prevent potential parsing errors in the future.
Escaping Comparison for Vue I18n Modes (Characters needing escaping)
| Target Char | legacy: true (v8 Compatible) | legacy: false (v9+ Modern) | Result |
|---|---|---|---|
| { | {'{'} | { '{' } | { |
| } | {'}'} | { '}' } | } |
| @ | {'@'} | { '@' } | @ |
| | | {'|'} | { '|' } | | |
| $ | {'$'} | { '$' } | $ |
| {name} | {'{'}name{'}'} | { '{' }name{ '}' } | {name} |
| @user | {'@'}user | { '@' }user | @user |
| a|b | a{'|'}b | a{ '|' }b | a|b |
Summary
- Core Format Difference: Legacy Mode (legacy: true) → char (no space); Modern Mode (legacy: false) → char (with space).
- Critical Pitfall: Formats cannot be mixed (e.g. using space format with legacy: true will cause errors).