如何通过正则表达式仅对 JSON 键着色？答案

【问题标题】：How to color only JSON keys via regex?如何通过正则表达式仅对 JSON 键着色？
【发布时间】：2019-08-16 05:08:24
【问题描述】：

在 javascript 中，我想通过正则表达式捕获我所有的 json 键。让我们假设 json 输出与新行中的每个键值对。例如

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

换句话说，字符串的每个第一个实例都带有双引号。

【问题讨论】：

Object.keys(JSON.parse(jsonString))?为什么要通过正则表达式方法？
不确定正则表达式可以在这里破解它。 JSON 语法相当复杂。 "key \"name\"" 是一个有效的密钥。
您能提供更多信息吗？文本/值没有颜色。仅当您想在某处显示某些内容时，颜色才有用。你在展示什么，你是怎么做的，你在哪里展示？

标签： javascript json regex

【解决方案1】：

这是你的工作方式：

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

往后看需要在您想要的文本之前加上引号。
您真正想要捕捉的内容。
提前要求在您的文本后面加上引号和冒号。

然后，将其替换为：

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

Here is a demo

【讨论】：

小心 Lookbehind lookbehind-not-working-in-firefox
别忘了考虑转义引号。

【解决方案2】：

我不认为正则表达式会在这里删除它，我建议你根据你的 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;
}

【讨论】：

【解决方案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;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.5.4/typescript.min.js"&gt;&lt;/script&gt;

谢谢

【讨论】：