fix: replacements with the same prefix (#109)

Author: xiCO2k

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/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');