Repository: xiCO2k/laravel-vue-i18n (ts)

Issue:
[2.3.5] Problem with intersecting parameters
Hi, first of all, thank you so much for this amazing package!

I recently noticed a problem after upgrading to 2.3.5 from 2.3.4, it seems like the translator "confused" if there are multiple parameters with intersecting names. Here's the example:

translation array:
`'showing'  => 'Showing :from - :to of :total items',`

Result:
`Showing 1 - 1 of 1tal items`

Seems like the translator thought there two instances of "to", even though it's actually "to" and "total".

The expected result is:
`Showing 1 - 1 of 2 items`

This is my first time submitting an issue. Sorry if I mistype something! Thanks!

Pull request:
fix: Replacements with the same prefix
Fixes #105

Patch:
diff --git a/src/index.ts b/src/index.ts
index 1e829a3..3a68bd2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -425,14 +425,16 @@ export class I18n {
   makeReplacements(message: string, replacements?: ReplacementsInterface): string {
     const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
 
-    Object.entries(replacements || []).forEach(([key, value]) => {
-      value = value.toString()
-
-      message = message
-        .replace(new RegExp(`:${key}`, 'g'), value)
-        .replace(new RegExp(`:${key.toUpperCase()}`, 'g'), value.toUpperCase())
-        .replace(new RegExp(`:${capitalize(key)}`, 'g'), capitalize(value))
-    })
+    Object.entries(replacements || [])
+      .sort((a, b) => (a[0].length >= b[0].length ? -1 : 1))
+      .forEach(([key, value]) => {
+        value = value.toString()
+
+        message = message
+          .replace(new RegExp(`:${key}`, 'g'), value)
+          .replace(new RegExp(`:${key.toUpperCase()}`, 'g'), value.toUpperCase())
+          .replace(new RegExp(`:${capitalize(key)}`, 'g'), capitalize(value))
+      })
 
     return message
   }


Test patch:
diff --git a/test/translate.test.ts b/test/translate.test.ts
index 3b25dd8..5dc4d9b 100644
--- a/test/translate.test.ts
+++ b/test/translate.test.ts
@@ -88,6 +88,14 @@ it('replaces multiple occurrences with "trans" helper', async () => {
     .toBe('olá Francisco, olá Francisco')
 })
 
+it('replaces occurrences that have the same prefix name', async () => {
+  await global.mountPlugin();
+
+  expect(trans('Showing :from - :to of :total items',
+    { from: '1', to: '2', total: '300' }
+  )).toBe('Showing 1 - 2 of 300 items')
+});
+
 it('loads a lang', async () => {
   const wrapper = await global.mountPlugin(`<h1>{{ $t('Welcome, :name!', { name: 'Francisco' }) }}</h1>`, 'en');