在Tagify中将文本转换为标记

Question

我想知道如何通过代码将文本转换为标记。假设我们有以下案文：

[[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}]]

如何通过代码将其转换为标记的经典图形显示？

编辑：

我会将这个文本[[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}]]转换为：

​

​

Answer 1

假设如下：

从https://github.com/yairEO/tagify标记v4.12.0

提供的数据是包含嵌套数组[[{..}]]的JSON字符串

tagify页面有一个添加新标记的示例：

tagify.addTags(["banana", "orange", "apple"])

因此，您需要将json-string转换为文本值数组。

使用JSON.parse转换为对象，然后使用data[0].map(从内部数组中读取每个值--因为外部数组(至少在示例中)总是一个维度，因此需要data[0]才能到达内部数组。

加在一起：

var tagify = new Tagify(document.getElementById("tags"));

//tagify.addTags(["banana", "orange", "apple"])

// added a second example in the inner array otherwise it's just `data[0][0].title`
var txt = '[[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}, {"text":"Diesel Woman"}]]';
var data = JSON.parse(txt);
var newTags = data[0].map(t => t.text);

tagify.addTags(newTags);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<input id='tags'>

不幸的是，这个插件使用localStorage时不检查它是否可用，所以不允许这样做，所以上面没有工作片段，但是这里有一个工作小提琴：https://jsfiddle.net/50n7ckLe/