Javascript 美化textarea输入中的json数据

我已经搜索了这个特定的主题，但找不到任何类似的主题。如果有，请关闭此链接并提供链接

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

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

---

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

我认为用常规文本区域无法做到这一点。您可以做的（以及大多数在线代码编辑器是如何做的）是创建一个透明的文本区域，覆盖在包含样式化代码的div之上。用户仍然能够键入输入并与输入交互（它触发相关联的表单事件），并且可以在div中显示语法高亮显示，用户可以直观地看到 （见附件）

---

现在关于JSON格式，我将向textarea添加自定义事件，以便当用户键入或粘贴某个内容时，通过Javascript JSON修饰器（请参阅）运行它，然后相应地重新填充div和textarea，语法突出显示很难，但请检查在文本区域中输入的内容。请注意，JSON必须有效才能工作。（使用开发人员控制台捕获错误。）检查有效的json

HTML：

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

首先尝试简单的输入，比如：{“a”：“hello”，“b”：123}

简单漂亮的JSON打印可以相当容易地完成。试试这个js代码：（）

对于此HTML：

<textarea id="myTextArea" cols=50 rows=25></textarea>

---

查看。

对于解析步骤，您只需要解析

JSON。解析

文本区域的内容并处理错误输入造成的任何错误

对于问题的格式部分，请使用

JSON.stringify（blob，undefined，2）

。或者，如果您需要颜色，这里有一个简单的JSON格式/颜色组件，用React编写：

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

const HighlightedJSON=（{json}:Object）=>{
const highlightedJSON=jsonObj=>
key（jsonObj.map）（key=>{
const value=jsonObj[key]；
设valueType=值的类型；
常量值=
[“字符串”、“数字”、“布尔值”]。包括（valueType）| |！值；
如果（isSimpleValue&&valueType==“对象”）{
valueType=“null”；
}
返回(
{key}：
{isSimpleValue(
{`${value}`}
) : (
highlightedJSON（值）
)}
);
});
返回{highlightedJSON（json）}；
};

查看此代码笔中的工作情况：

---

希望有帮助

这里有一个递归函数，用于在对象被多次字符串化时返回该对象：

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

---

晚回答但现代回答，使用秘密意图参数

我通常选择：

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的粉丝，你也可以使用我写的这个小插件：


//插件
$.fn.json_beautify=function（）{
var obj=JSON.parse（this.val（））；
var pretty=JSON.stringify（obj，未定义，4）；
这个.val（漂亮）；
};
//然后像这样在任何文本区域使用它
$（'#myTextArea'）.json_bestify（）

{“name”：“John”，“age”：30}
JSON.stringify（obj，undefined，4）这就是我要找的。谢谢是的，这是JSON.stringify（）的结构。stringify（）如何递归？@Luke谢谢！错过了几行！
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;
  }
};

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