Skip to content
This repository was archived by the owner on Dec 31, 2024. It is now read-only.

Commit acfc458

Browse files
TATSUNO Yasuhirokazupon
authored andcommitted
⚡ improvement(index): Allow escaping link key like @:(foo.bar). (#437) by @exoego
* Allow escaping the link to other key in the form of @:(key) * Cache the regexp to avoid instantiation every time _link called.
1 parent 6d45d86 commit acfc458

4 files changed

Lines changed: 44 additions & 3 deletions

File tree

src/index.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const numberFormatKeys = [
3131
'localeMatcher',
3232
'formatMatcher'
3333
]
34+
const linkKeyMatcher = /(@:([\w\-_|.]+|\([\w\-_|.]+\)))/g
35+
const bracketsMatcher = /[()]/g
3436

3537
export default class VueI18n {
3638
static install: () => void
@@ -251,16 +253,16 @@ export default class VueI18n {
251253
// Match all the links within the local
252254
// We are going to replace each of
253255
// them with its translation
254-
const matches: any = ret.match(/(@:[\w\-_|.]+)/g)
256+
const matches: any = ret.match(linkKeyMatcher)
255257
for (const idx in matches) {
256258
// ie compatible: filter custom array
257259
// prototype method
258260
if (!matches.hasOwnProperty(idx)) {
259261
continue
260262
}
261263
const link: string = matches[idx]
262-
// Remove the leading @:
263-
const linkPlaceholder: string = link.substr(2)
264+
// Remove the leading @: and the brackets
265+
const linkPlaceholder: string = link.substr(2).replace(bracketsMatcher, '')
264266
// Translate the link
265267
let translated: any = this._interpolate(
266268
locale, message, linkPlaceholder, host,

test/unit/basic.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@ describe('basic', () => {
4949
})
5050
})
5151

52+
describe('linked translation', () => {
53+
it('should translate link with braces ', () => {
54+
assert.strictEqual(i18n.t('message.linkBrackets'), 'Hello hoge. Isn\'t the world great?')
55+
})
56+
})
57+
5258
describe('ja locale', () => {
5359
it('should translate a japanese', () => {
5460
assert.equal(i18n.t('message.hello', 'ja'), messages.ja.message.hello)

test/unit/fixture/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default {
1313
linkEnd: 'This is a linked translation to @:message.hello',
1414
linkWithin: 'Isn\'t @:message.hello we live in great?',
1515
linkMultiple: 'Hello @:message.hoge!, isn\'t @:message.hello great?',
16+
linkBrackets: 'Hello @:(message.hoge). Isn\'t @:(message.hello) great?',
1617
linkHyphen: '@:hyphen-hello',
1718
linkUnderscore: '@:underscore_hello',
1819
linkList: '@:message.hello: {0} {1}',

vuepress/guide/messages.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,35 @@ Output the below:
102102
```html
103103
<p>DIO: the world !!!!</p>
104104
```
105+
106+
107+
### Grouping by brackets
108+
109+
A translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`.
110+
111+
This can be useful if the link `@:message.something` is following by period `.`, which can be a part of link but in case it should not be.
112+
113+
Locale messages the below:
114+
115+
```js
116+
const messages = {
117+
en: {
118+
message: {
119+
dio: 'DIO',
120+
linked: 'There\'s a reason, you lost, @:(message.dio).'
121+
}
122+
}
123+
}
124+
```
125+
126+
Template the below:
127+
128+
```html
129+
<p>{{ $t('message.linked') }}</p>
130+
```
131+
132+
Output the below:
133+
134+
```html
135+
<p>There's a reason, you lost, Dio.</p>
136+
```

0 commit comments

Comments
 (0)