如何从AngularJS中Tagify混合输入返回值提取白名单code属性

实现思路 #

Tagify 混合模式内置getMixedTags()方法可直接获取所有已插入的标签实体，无需手动解析转义后的字符串，可直接从标签实体中读取你预存在白名单中的code属性完成替换，完全不受多语言翻译后value值变化的影响。

方案1：不修改标签原始数据，手动转换输出（推荐） #

适合需要同时保留展示用多语言value、业务用code，或需要标签回显的场景：

tagify.on('change', () => {
    // 获取所有已插入的标签实体列表
    const insertedTags = tagify.getMixedTags();
    // 拿到Tagify返回的带[[...]]标记的原始字符串
    let finalContent = tagify.DOM.input.value;

    insertedTags.forEach(tag => {
        // 匹配转义后的标签标记，直接替换为对应的code值
        const tagPlaceholder = `[[${JSON.stringify(tag.data)}]]`;
        finalContent = finalContent.replaceAll(tagPlaceholder, tag.data.code);
    });

    // 输出结果即为预期的 Hello $name, the SMS has been sent to your phone $phone
    console.log(finalContent);
});

方案2：修改标签存储规则，直接生成code格式输出 #

适合不需要标签反向回显的场景，配置更简单，无需手动转换：

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
    },
    // 新增转换回调，插入标签时将存储值替换为code，展示仍用原多语言value
    transformTag: (tagData) => {
        tagData.value = tagData.code;
    }
});

// 直接取值即可得到目标格式
tagify.on('change', () => console.log(tagify.value))

内容的提问来源于stack exchange，提问作者tinyCoder