Extract specific variables from a mixed string/JSON data

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.

from Extract specific variables from a mixed string/JSON data