javascript - 从混合字符串/JSON 数据中提取特定变量

Question

我正在使用 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))

用户输入将是:

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

这个简单的例子返回:

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

我稍后要做的是用我自己的动态变量替换用户选择的标签(通过输入 @ 字符并从下拉列表中选择它们)。
我能够通过 tagify.DOM.input.textContent 获得不错的结果因为它呈现了以下结果:

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

然而，由于 whitelist可以翻译，可以翻译成其他我无法翻译的语言 find and replace很容易以后，我需要的是 code JSON 白名单中的属性，而不是 value .我找不到方法的预期结果是:

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

谢谢。

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