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

【问题标题】：Extract specific variables from a mixed string/JSON data从混合字符串/JSON 数据中提取特定变量
【发布时间】：2021-12-16 07:45:20
【问题描述】：

我正在使用 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 ×，短信已发送到您的手机Phone Number ×。

这个简单的例子返回：

您好[[{ value: "User Name", code: '$name' }]]，短信已收到发送到您的手机[[{ value: "Phone Number", code: '$phone' }]]。（并且返回的 JSON 被转义）

我稍后要做的是用我自己的动态变量替换用户选择的标签（通过输入@ 字符并从下拉列表中选择它们）。

我能够使用tagify.DOM.input.textContent 获得一个不错的结果，因为它呈现了以下结果：

您好，用户名，短信已发送到您的手机电话号码。

但是，由于whitelist 是可翻译的，并且可以翻译成其他语言，而我以后无法轻松使用find and replace，因此我需要的是来自JSON 白名单的code 属性，而不是value。我还没有找到方法的预期结果是：

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

谢谢。

【问题讨论】：

对不起，我没有收到您的请求。
您说使用tagify.DOM.input.textContent 可以生成Hello User Name, the SMS has been sent to your phone Phone Number。你能发布你为此编写的代码吗？
只需使用tagify.DOM.input.textContent 即可返回上述结果！
[codesandbox.io/s/tagify-react-wrapper-forked-dfo29?file=/src/…
“以后无法轻松查找和替换”是否意味着您不想修改此“Hello [[{ value: "User Name", code: '$name' } ]]，短信已发送到您的手机 [[{ value: "Phone Number", code: '$phone' }]]" -> to this -> "您好$name，短信已发送到您的手机美元电话。” ?

标签： javascript json

【解决方案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));

【讨论】：

请注意e.target.value应该是e.detail.value