Extract specific variables from a mixed string/JSON data

[tinyCoder32]

I am using Tagify with a custom AngularJS directive that I built, Tagify mixed input returns the JSON objects of selected tags and text in one single string, for example:

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))

The user input would be:

Hello User Name ×, the SMS has been sent to your phone Phone Number ×.

This simple example returns:

Hello [[{ value: "User Name", code: '$name' }]], the SMS has been sent to your phone [[{ value: "Phone Number", code: '$phone' }]]. (and the JSON returned is escaped)

What I am doing later is replacing the tags that the user selected (by typing the @ character and selecting them from the dropdown) with my own dynamic variables.

I was able to get a nice result with tagify.DOM.input.textContent as it rendered the following result:

Hello User Name, the SMS has been sent to your phone Phone Number.

However, since the whitelist is translatable and can be in other languages that I can't find and replace easily later, what I need is the code attribute from the JSON whitelist and not the value. The expected result that I couldn't find a way to reach yet is:

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

Thanks.

[yairEO]

Why do you need Tagify for this? Does the user actually types text mixed with tags?

If I understand correctly, your users create a template which you then replace. How do you replace the tags?

You have access to all the tags using tagify.value (assuming tagify is the name of the tagify instance's variable) and then you can iterate the tags and run the replaceTag method (see more info in the README)

[tinyCoder32]

Hi, thanks for your reply.

Yes, the user build his own text template, with the ability to choose some dynamic variables that I need to replace at the end of the process with some real data.

The main problem is that I need to translate the tags, this means I can't depend on the tag text to replace later with the real value, I will have to use the JSON format of the tags, but in this case I need to replace those code variables with the real data and get a pure formatted text result.