То, что вы на самом деле запрашиваете, - это возможность запустить линтер / префтификатор для данной текстовой строки. Здесь будут всевозможные проблемы. Прежде всего, вы должны убедиться, что он действителен json, прежде чем пытаться его пометить / подтянуть.
Однако, если вы можете гарантировать, что пользователь собирается вставить в действительный json, вы можете сделать что-то вроде этого:
Вот пример JSON строка. Вставьте его в левую текстовую область, и она обновит правую область до предварительно подтвержденного формата. (Событие запускается при изменении текстовой области)
{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}}
document.getElementById('txt').addEventListener('change', (e) => {
const text = e.target.value;
try {
const obj = JSON.parse(text);
const pretty = JSON.stringify(obj, null, 2);
document.getElementById('prettyText').value = pretty;
} catch (ex) {
console.warn('Invalid JSON');
}
});
#container {
display: grid;
grid-template-columns: 1fr 1fr;
}
textarea {
width: 100%;
}
<div id="container">
<div>
<h5>Original</h5>
<textarea type="text" rows="10" id="txt"></textarea>
</div>
<div>
<h5>Pretty</h5>
<textarea type="text" rows="10" id="prettyText"></textarea>
</div>
</div>
Вы также можете взглянуть на это: https://palantir.github.io/tslint/usage/library/
Похоже, предложения TSLint способ программно запустить линтер против чего-либо. Возможно, вы сможете найти способ заставить это работать, разместив свой текст в конечной точке узла или что-то еще. Посмотрите на npm тоже. Там много линтера / json преттификаторов.