Преобразование текста в тег в Tagify
Я хотел бы знать, как можно с помощью кода преобразовать текст в тег. Предположим, у нас есть следующий текст:
[[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}]]
как мне с помощью кода преобразовать его в классический графический дисплей tagify?
Обновлено:
Я бы преобразовал этот текст [[{"value":2,"text":"Petrol Man","title":"Petrol Man","prefix":"@"}]] в:
Можете ли вы включить src= для плагина/кода tagify, который вы используете, пожалуйста? tagify SO wiki немного недостаточно детализирован, так как, вероятно, это будет общий tagify, а не какой-либо конкретный плагин, который вы используете.
<script src = "../tagify.js"></script> <script src = "../tagify.polyfills.min.js"></script> <link href = "../tagify.css" rel = "stylesheet" type = "text/css" />
... и... откуда вы вообще скачали tagify.js? Возможно, в первых нескольких строках tagify.js есть источник
* Tagify (v 4.12.0) - компонент ввода тегов * By Yair Even-Or * github.com/yairEO/tagify
Ваш "текст" на самом деле текст? как в var x = '[[{"value":2... }]]"`
да это строка
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
С предположениями:
tagify v4.12.0 от https://github.com/yairEO/tagify
предоставленные данные представляют собой строку JSON, содержащую вложенный массив
[[{..}]]
На странице tagify есть пример добавления новых тегов:
tagify.addTags(["banana", "orange", "apple"])
поэтому вам нужно преобразовать вашу json-строку в массив текстовых значений.
Используйте 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, не проверяя, доступен ли он, и SO не разрешает этого, поэтому нет рабочего фрагмента выше, но вот рабочая рабочий пример:
https://jsfiddle.net/50n7ckLe/
Можете ли вы положить треску, которую вы хотите?