美化textarea输入中的json数据 [英] Prettify json data in textarea input

问题描述

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

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

问题在于json obj复制和pattes通常会导致多余的空格，并且永远不会正确对齐，即使使用pre标记也是如此。我也想要一个适用于按键和值的良好配色方案。

我看过插件，其他问题和代码片段，但它们不适用于textareas该文本是可编辑的。有没有在编辑模式下保持它的风格，而不显示所有的风格的HTML标签？我希望能够从头开始用javascript或jquery编写它。 解决方案

语法高亮显得很难，但请查看<在文本区域输入一个用于漂亮打印json对象的小提琴。请注意，JSON必须有效才能使其正常工作。 （使用开发控制台捕获错误。）检查 jsLint 以获取有效的json。

HTML：

 < textarea id =myTextAreacols = 50 rows = 10>< / textarea> 
< button onclick =prettyPrint（）>漂亮的打印< / button> 
  

js：

 函数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 
 
 
 
 
 
 < b：123} 
 
 
 
简单漂亮的JSON打印可以轻松完成。试试这个js代码：（ jsFiddle here ）
  //任意js对象：
 var myJsObj = {a：'foo'，'b'：'bar'，c：[false，2，null，'null']}; 
 
 //使用JSON.stringify漂亮的打印能力：
 var str = JSON.stringify（myJsObj，undefined，4）; 
 
 //在文本区域显示漂亮的打印对象：
 document.getElementById（'myTextArea'）。innerHTML = str; 
  
对于这个HTML：
 < textarea id =myTextAreacols = 50 rows = 25>< / textarea> 
  
然后查看JSON.stringify文档。
 
I've searched for this particular topic and couldn't find anything similar to it. If there is please close this and give a link.

I'm creating a json data api simulator. I want users to be able to copy and paste a json object request into a textarea where they can also modify it before sending it to the server. 

Problem is json obj copy and patses often results in extra spaces and is never aligned properly, even with the pre tag. I also want a good color scheme applied to keys and values.

I've seen plugins, other questions and snippets of code, but they don't apply to textareas where the text is editable. Is there to keep it styled while in edit mode without it showing all the html tags that styled it? I want to be able to write it from scratch with javascript or jquery.
解决方案
The syntax highlighting is tough but check out this fiddle for pretty printing a json object entered in a text area. Do note that the JSON has to be valid for this to work. (Use the dev console to catch errors.) Check jsLint for valid json.

The HTML:
<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>
The 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;
}
First try simple input like: {"a":"hello","b":123}

Simple pretty printing of JSON can be done rather easily. Try this js code: (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;
For this HTML:
<textarea id="myTextArea" cols=50 rows=25></textarea>
And check out JSON.stringify documentation.

                        
这篇关于美化textarea输入中的json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！