텍스트 영역 입력에서 json 데이터 예쁘게 만들기

텍스트 영역 입력에서 json 데이터 예쁘게 만들기

이 주제를 찾아봤는데 비슷한 게 없어요.만약 있다면, 이것을 닫고 링크를 걸어주세요.

json 데이터 API 시뮬레이터를 만들고 있습니다.사용자가 json 객체 요청을 복사하여 텍스트 영역에 붙여넣을 수 있도록 하고, 이를 수정한 후 서버로 전송할 수 있도록 하고 싶습니다.

문제는 json obj 복사와 패스는 종종 여분의 공간을 발생시키고 사전 태그를 사용하더라도 올바르게 정렬되지 않는다는 것입니다.키와 값에 좋은 색상표도 적용했으면 합니다.

플러그인, 기타 질문 및 코드 조각은 보았지만 텍스트 편집이 가능한 텍스트 영역에는 적용되지 않습니다.스타일링한 html 태그를 모두 표시하지 않고 편집 모드에서 스타일을 유지할 수 있습니까?javascript나 jquery로 처음부터 쓸 수 있으면 좋겠습니다.

구문 강조 표시는 어렵지만 텍스트 영역에 입력된 json 객체를 예쁘게 인쇄하려면 이 바이올린을 확인하십시오.이 기능이 작동하려면 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>

JSON.stringify 문서를 참조하십시오.

늦은 답변이지만 현대적인 답변, secret intention 파라미터를 사용합니다.

저는 보통 다음을 원합니다.

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

파싱 스텝에서는, 다음의 조작을 실시합니다.JSON.parse텍스트 영역의 내용을 표시하고 잘못된 입력으로 인한 오류를 처리합니다.

질문의 형식 부분에 대해서는,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에서 보실 수 있습니다.

도움이 됐으면 좋겠네요!

만약 당신이 jquery 팬이라면, 내가 쓴 작은 플러그인도 사용할 수 있습니다.

// The plugin
$.fn.json_beautify= function() {
    this.each(function(){
        var el = $(this),
            obj = JSON.parse(el.val()),
            pretty = JSON.stringify(obj, undefined, 4);
        el.val(pretty);
    });
};

// Then use it like this on any textarea
$('textarea').json_beautify();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="myTextArea" cols=50 rows=5>{"name":"John","age":30}</textarea>
<textarea id="myTextArea2" cols=50 rows=5>{"name":"Bob","age":55}</textarea>

UPD 코드가 다중 선택 요소로 변경되었습니다.

일반 문자 영역으로는 할 수 없을 것 같아요.대부분의 온라인 코드 편집기가 수행할 수 있는 작업은 스타일 코드를 포함하는 div 위에 겹쳐지는 투명 텍스트 영역을 만드는 것입니다.사용자는 여전히 입력을 입력하고 조작할 수 있으며(관련된 폼이벤트를 기동), 사용자가 시각적으로 볼 수 있는 구문의 하이라이팅을 표시할 수 있습니다(구문의 하이라이팅을 즉시 실행할 수 있는 텍스트 영역 참조).

JSON 포맷에 대해서는 텍스트 영역에 커스텀이벤트를 추가하여 사용자가 입력하거나 붙여넣을 때 Javascript JSON prettifier를 통해 실행(JavaScript를 사용하여 JSON을 예쁘게 인쇄하는 방법 참조)한 후 그에 따라 div와 텍스트 영역을 다시 채웁니다.

다음은 여러 번 문자열이 지정된 개체를 반환하는 재귀 함수입니다.

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

언급URL : https://stackoverflow.com/questions/26320525/prettify-json-data-in-textarea-input