如何通过代码将指定文本转换为Tagify经典标签图形展示？

1. 引入Tagify资源 #

先在HTML中引入Tagify的样式和脚本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.8/dist/tagify.css">
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.8/dist/tagify.min.js"></script>

2. 创建HTML容器 #

准备一个用于渲染标签的元素，输入框或普通容器都可以：

<!-- 可编辑的输入框 -->
<input id="tag-input" type="text" placeholder="添加标签">

<!-- 或者只读容器（匹配示例图展示需求） -->
<div id="tag-container"></div>

3. 解析JSON并初始化Tagify #

你的原始文本是转义后的JSON字符串，先解析为JavaScript对象，再传给Tagify渲染：

// 原始转义JSON文本
const rawTagJson = '[[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}]]';

// 解析JSON，提取标签数组
const tagList = JSON.parse(rawTagJson)[0];

// 方案1：基于输入框初始化可编辑标签
const inputElement = document.getElementById('tag-input');
const editableTagify = new Tagify(inputElement, {
  enforceWhitelist: true, // 限制仅使用白名单内的标签
  whitelist: tagList
});
// 直接添加标签到输入框
editableTagify.addTags(tagList);

// 方案2：基于div初始化只读标签（匹配示例图样式）
const containerElement = document.getElementById('tag-container');
const readOnlyTagify = new Tagify(containerElement, {
  readOnly: true, // 设置为只读
  whitelist: tagList
});
readOnlyTagify.addTags(tagList);

效果说明 #

解析后的标签数据包含prefix: "@"，最终会渲染出带@前缀的标签（如@Petrol Man），和你提供的示例图样式一致。如果需要调整标签样式，可通过修改Tagify的CSS类或自定义配置项实现。

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