在textarea输入中整理json数据

时间:2014-10-12 00:07:13

标签: javascript jquery html css json

我已经搜索过这个特定的主题,但却找不到类似的东西。如果有,请关闭此并给出一个链接。

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

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

我已经看过插件,其他问题和代码段,但它们不适用于文本可编辑的textareas。在编辑模式下是否保持样式,而不显示所有样式的html标签?我希望能够用javascript或jquery从头开始编写它。

6 个答案:

答案 0 :(得分:95)

语法突出显示很难,但请查看在文本区域中输入的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;
}

首先尝试简单输入,例如:{&#34; a&#34;:&#34; hello&#34;,&#34; b&#34;: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>

并查看JSON.stringify documentation

答案 1 :(得分:2)

如果您是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>

答案 2 :(得分:1)

对于解析步骤,您只需要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>; }; textarea的内容并处理输入错误的任何错误。

对于问题的格式部分,请使用{{1}}。或者,如果你需要颜色,这里是一个用React编写的简单JSON格式/颜色组件:

{{1}}

在此CodePen中查看它: https://jsfiddle.net/x4gokvoa/9/

希望有所帮助!

答案 3 :(得分:1)

最新答案却是现代的,请使用秘密意图参数。

我通常会去:

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.
 */

答案 4 :(得分:0)

我不认为可以用普通的textareas来完成。您可以做什么(以及大多数在线代码编辑器如何做)是创建一个透明的textarea,它覆盖在包含样式代码的div之上。用户仍然可以输入并与输入交互(并且它会触发相关的表单事件),并且您可以在div中显示语法突出显示,用户将在视觉上看到 (见Textarea that can do syntax highlighting on the fly?

现在关于JSON格式化,我会将自定义事件添加到textarea,以便当用户键入或粘贴某些内容时,通过Javascript JSON美化器运行它(请参阅How can I pretty-print JSON using JavaScript?),然后重新填充div和因此,textarea

答案 5 :(得分:0)

这是一个递归函数,用于在多次被字符串化的情况下返回对象:

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;
  }
};