Prettify данные json в текстовом поле ввода

Я искал эту тему и не мог найти ничего похожего на нее. Если есть, пожалуйста, закройте это и дайте ссылку.

Я создаю json data api simulator. Я хочу, чтобы пользователи могли копировать и вставлять запрос объекта json в текстовое поле, где они также могут изменять его перед отправкой на сервер.

Проблема заключается в том, что json obj copy и patses часто приводят к дополнительным пробелам и никогда не выравниваются должным образом даже с предварительным тегом. Я также хочу, чтобы хорошая цветовая схема применялась к клавишам и значениям.

Я видел плагины, другие вопросы и фрагменты кода, но они не применяются к текстовым областям, где текст доступен для редактирования. Нужно ли сохранять стиль в режиме редактирования без отображения всех html-тегов, которые его стилировали? Я хочу иметь возможность писать с нуля с помощью javascript или jquery.

Ответы

Ответ 1

Подсветка синтаксиса жесткая, но ознакомьтесь с этой скрипкой для довольно печатания json-объекта, введенного в текстовую область. Обратите внимание, что JSON должен быть действительным для этого. (Используйте консоль dev, чтобы поймать ошибки.) Проверьте jsLint для действительного json.

HTML:

<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

js:

function prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

Сначала попробуйте простой ввод, например: { "a": "hello", "b": 123}

Простую красивую печать JSON можно сделать довольно легко. Попробуйте этот код js: (jsFiddle здесь)

// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

Для этого HTML:

<textarea id="myTextArea" cols=50 rows=25></textarea>

И проверьте документацию JSON.stringify.

Ответ 2

Я не думаю, что это можно сделать с регулярными текстовыми полями. Что вы можете сделать (и как это делают большинство редакторов онлайновых кодов), так это создать прозрачную текстовую область, которая накладывается поверх div, содержащего стилизованный код. Пользователь все равно сможет вводить и взаимодействовать с вводом (и он запускает связанные события формы), и вы можете отображать подсветку синтаксиса в div, который пользователь будет визуально видеть (см. Textarea, которая может выполнять подсветку синтаксиса на лету?

Теперь, что касается форматирования JSON, я бы добавил пользовательские события в текстовое поле, чтобы когда пользователь вводил или вставлял что-то, запускайте его через префикс Javascript JSON (см. Как я могу красиво -print JSON с использованием JavaScript?), а затем повторно заполнить div и textarea соответственно