美化 textarea 输入中的 json 数据

Question

我搜索了这个特定主题，但找不到与之类似的内容。如果有请关闭此并提供链接。

我正在创建一个 json 数据 api 模拟器。我希望用户能够将 json 对象请求复制并粘贴到文本区域中，他们还可以在将请求发送到服务器之前对其进行修改。

问题是 json obj copy 和 patses 通常会导致额外的空格并且永远不会正确对齐，即使使用 pre 标签也是如此。我还想要一个适用于键和值的良好配色方案。

我见过插件、其他问题和代码片段，但它们不适用于文本可编辑的文本区域。是否可以在编辑模式下保持样式而不显示所有样式化的 html 标签？我希望能够使用 javascript 或 jquery 从头开始编写它。

原文由 archytect 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

语法突出显示很难，但请查看此 小提琴以漂亮地打印在文本区域中输入的 json 对象。请注意，JSON 必须有效才能起作用。 （使用开发控制台捕获错误。）检查 jsLint 是否有有效的 json。

HTML：

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

脚本：

 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 文档。

原文由 Paul Sasik 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

迟到但现代的答案，使用秘密意图参数。

我通常去：

JSON.stringify(myData, null, 4);

---

这是代码定义，它解释得很好。

stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;

 /**
 * Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
 * @param value A JavaScript value, usually an object or array, to be converted.
 * @param replacer An array of strings and numbers that acts as a approved list for selecting the object properties that will be stringified.
 * @param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
 */

原文由 Jack 发布，翻译遵循 CC BY-SA 4.0 许可协议