我搜索了这个特定的主题，但找不到任何类似的东西。如果有请关闭此链接并提供链接。
我正在创建一个 json 数据 api 模拟器。我希望用户能够将 json 对象请求复制并粘贴到 textarea 中，他们还可以在将其发送到服务器之前对其进行修改。
问题是 json obj 副本和 patses 通常会导致额外的空格并且永远不会正确对齐，即使使用 pre 标记也是如此。我还想要一个很好的配色方案应用于键和值。
我见过插件、其他问题和代码的 sn-ps，但它们不适用于文本可编辑的文本区域。是否在编辑模式下保持其样式而不显示所有样式的html标签？我希望能够使用 javascript 或 jquery 从头开始编写它。
【问题讨论】：
标签： javascript jquery html css json
语法突出显示很难，但请查看在文本区域中输入的 fiddle for pretty printing a json object。请注意，JSON 必须有效才能正常工作。 （使用开发控制台捕获错误。）检查 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 here)
// 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>
【讨论】：
stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string的结构@
对于解析步骤，您只需要JSON.parse textarea 的内容并处理来自错误输入的任何错误。
对于问题的格式部分，请使用JSON.stringify(blob, undefined, 2)。或者，如果您需要颜色，这里是一个用 React 编写的简单 JSON 格式/颜色组件：
const HighlightedJSON = ({ json }: Object) => {
const highlightedJSON = jsonObj =>
Object.keys(jsonObj).map(key => {
const value = jsonObj[key];
let valueType = typeof value;
const isSimpleValue =
["string", "number", "boolean"].includes(valueType) || !value;
if (isSimpleValue && valueType === "object") {
valueType = "null";
}
return (
<div key={key} className="line">
<span className="key">{key}:</span>
{isSimpleValue ? (
<span className={valueType}>{`${value}`}</span>
) : (
highlightedJSON(value)
)}
</div>
);
});
return <div className="json">{highlightedJSON(json)}</div>;
};
查看它在此 CodePen 中的工作情况： https://codepen.io/benshope/pen/BxVpjo
希望有帮助！
【讨论】：
较晚的答案但现代的答案，使用秘密意图参数。
我通常会选择：
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.
*/
【讨论】：
如果你是 jquery 爱好者，也可以使用我写的这个小插件：
// The plugin
$.fn.json_beautify= function() {
var obj = JSON.parse( this.val() );
var pretty = JSON.stringify(obj, undefined, 4);
this.val(pretty);
};
// Then use it like this on any textarea
$('#myTextArea').json_beautify();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="myTextArea" cols=50 rows=10>{"name":"John","age":30}</textarea>【讨论】：
我认为常规文本区域无法做到这一点。您可以做的（以及大多数在线代码编辑器如何做）是创建一个透明的文本区域，覆盖在包含样式代码的 div 之上。用户仍然可以键入并与输入进行交互（并且它会触发相关的表单事件），并且您可以在 div 中显示语法突出显示，用户可以直观地看到 （见Textarea that can do syntax highlighting on the fly?）
现在对于 JSON 格式，我将向 textarea 添加自定义事件，以便当用户键入或粘贴某些内容时，通过 Javascript JSON prettifier 运行它（请参阅How can I pretty-print JSON using JavaScript?），然后相应地重新填充 div 和 textarea
【讨论】：
这是一个递归函数，用于在多次字符串化后返回一个对象：
const jsonPrettify = (json) => {
if (typeof json === 'object' && json !== null) {
const pretty = JSON.stringify(json, undefined, 4);
return pretty;
}
try {
const obj = JSON.parse(json);
return jsonPrettify(obj);
} catch (e) {
return json;
}
};
【讨论】：