如何通過正則表達式僅對 JSON 鍵着色？

Question

在 javascript 中，我想通過正則表達式捕獲我所有的 json 鍵。 讓我們假設 json 輸出與新行中的每個鍵值對。 例如

{
    "foo": "bar",
    "age": 23,
}

換句話說，字符串的每個第一個實例都帶有雙引號。

Answer 1

我不認為正則表達式會在這里刪掉，我建議您根據JSON構建輸出字符串：

 let json = { foo: "bar", age: 23, test1: 1, test2: 2, test3: 3, }; let formattedJSONString = Object.entries(json) .reduce((acc, [key, value]) => `${acc} <span class='json-key'>"${key}": </span> <span class='value'>"${value}"</span>,<br/>`, `{<br/>`) + `}`; document.write(formattedJSONString); 

 .json-key { color: blue; margin-left: 8px; font-family: monospace; } .value { font-family: monospace; } 

Answer 2

這是您的工作方式：

(?<=")    (.*?)    (?=":)
   1        2         3

1. 后方需要在您想要的文本前加引號。
2. 您實際想要捕獲的內容。
3. 先行要求在文本后加引號和冒號。

然后，將其替換為：

<span style="color: red;">$1</span>

這是一個演示

Answer 3

我為此使用了遞歸。

JSON 對象

let json = {
  foo: "bar",
  age: 23,
  foo2: {
    hello: "world",
    world: "hello"
  },
};

此函數將遍歷 JSON 對象並將其鍵和值添加到 span 標簽中，並使用 JSON 語法標記分隔它們

 let json = { foo: "bar", age: 23, hi: "bye", bar: { hi: "now", now: "hi" } }; let stylizedJson = "<span class='syntax'>{</span><br/>" + createFormattedJSON(json,24) + "<br/><span class='syntax'>}</span>"; document.write(stylizedJson); function createFormattedJSON(data, margin) { var formattedJson = ''; Object.entries(data).forEach(([key, value]) => { formattedJson += `<span style='margin-left:${margin}px;' class='json-key'>"${key}"</span><span class="syntax" ${this.scope}>:</span>` if (typeof value == "object") { formattedJson += `<span class='syntax'>{</span><br/>` formattedJson += this.createFormattedJSON(value, margin + 12) formattedJson += `<br/><span style='margin-left:${margin}px;' class='syntax'>}</span>` } else { if (Object.keys(data).reverse()[0] != key) formattedJson += `<span class='value'>"${value}"</span><span class="syntax">,</span><br/>` else formattedJson += `<span class='value'>"${value}"</span>` } }) return formattedJson; }

 .json-key { color: #7A01FF; margin-left: 10px; font-family: Consolas; } .value { color: #F9D372; font-family: Consolas; } .syntax { color: #EEEEEE; font-family: Consolas; } body { background-color: #232932; padding: 12px; }

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

謝謝