Извлеките определенные переменные из смешанной строки/данных JSON

#javascript #json

Вопрос:

Я использую Tagify с пользовательской директивой AngularJS, которую я создал, смешанный ввод Tagify возвращает объекты JSON выбранных тегов и текста в одной строке, например:

 var tagify = new Tagify(myElement, {
    mode: 'mix',
    pattern: /@/,
    whitelist: [{ value: "User Name", code: '$name' }, { value: "Phone Number", code: '$phone' }],
    enforceWhitelist: true,
    dropdown: {
        maxItems: 20,
        classname: "tags-look",
        enabled: 0,
        closeOnSelect: true
    }
});
tagify.on('change', () => console.log(tagify.DOM.input.value))

Пользовательский ввод будет:

Здравствуйте User Name × , SMS было отправлено на ваш телефон Phone Number × .

Этот простой пример возвращает:

Здравствуйте [[{ value: "User Name", code: '$name' }]] , SMS было отправлено на ваш телефон [[{ value: "Phone Number", code: '$phone' }]] . (и возвращенный JSON экранируется)

То, что я делаю позже, — это заменяю теги, выбранные пользователем (путем ввода @ символа и выбора их из выпадающего списка), моими собственными динамическими переменными.

Я смог получить хороший результат tagify.DOM.input.textContent , так как он отображал следующий результат:

Привет, Имя пользователя, SMS было отправлено на ваш номер телефона.

Однако, поскольку whitelist это можно перевести и может быть на других языках, которые я не смогу find and replace легко использовать позже, мне нужен code атрибут из белого списка JSON, а не value . Ожидаемый результат, которого я пока не мог найти способ достичь, таков:

Hello $name, the SMS has been sent to your phone $phone .

Спасибо.

1. Извините, я не понял вашу просьбу.

2. Вы сказали, что с tagify.DOM.input.textContent помощью вас удалось сгенерировать Hello User Name, the SMS has been sent to your phone Phone Number . Можете ли вы опубликовать код, который вы для этого написали.

3. Простое использование tagify.DOM.input.textContent возвращает указанный результат!

4.[codesandbox.io/s/tagify-react-wrapper-forked-dfo29?file=/src/…

5. Под «не могу легко найти и заменить позже» вы имеете в виду, что не хотите изменять это «Здравствуйте [[{ значение: «Имя пользователя», код: ‘$имя’}]], SMS было отправлено на ваш телефон [[{ значение: «Номер телефона», код: ‘$телефон’ }]]» -> на это ->> «Здравствуйте, $имя, SMS было отправлено на ваш телефон $телефон».?

Ответ №1:

Вы можете создать свою собственную функцию преобразования, чтобы преобразовать ее так, как вам нравится, вы можете сделать что-то вроде этого.

 function transformer(value) {
    return value.replace(/[[(.*?)]]/g, (arr => {
     let json = JSON.parse(arr);
     return json[0].map(e => e.code).join(', ');
    }))
 }

И затем вы можете вызвать его при изменении (или, скорее, при/или перед отправкой), как это:

 tagify.on('change', (e) => transformer(e.detail.value));