javascript - 使用 CSS 突出显示 JSONPath 中选定的文本

Question

我正在使用JSONPath从 JSON 文件中选择一些元素。我希望所选元素显示在 html 页面上。 (应显示整个 JSON，仅突出显示所选标签)

最终结果应该类似于 XPath Evaluator在 Defient.js 网站中。

到目前为止，我已经成功使用 JSONPath 来选择我想要的元素并将其作为输出。另外，我可以使用JSON.stringify在 <pre>标签将 JSON 打印到网页。

我想知道的是我应该如何突出显示所选文本。输出不能简单地用于生成正则表达式，因为它可能匹配 JSONPath 过滤器未选择的字段。

Answer 1

正如您所说，您可以获取路径，只需用 html 标签包装相应路径的值并给出一个类即可。然后你可以用css突出显示。

pre {
   background-color: ghostwhite;
   border: 1px solid silver;
   padding: 10px 20px;
   margin: 20px; 
   }
.json-key {
   color: brown;
   }
.json-value {
   color: navy;
   }
.json-string {
   color: olive;
   }

    <pre><code id="planets">[
       {
          <span class="json-key">name</span>: <span class="json-string">"Earth"</span>,
          <span class="json-key">order</span>: <span class="json-value">3</span>,
          <span class="json-key">stats</span>: {
             <span class="json-key">life</span>: <span class="json-value">true</span>,
             <span class="json-key">mass</span>: <span class="json-value">5.973600000000001e+24</span>
          }
       },
       {
          <span class="json-key">name</span>: <span class="json-string">"Saturn"</span>,
          <span class="json-key">order</span>: <span class="json-value">6</span>,
          <span class="json-key">stats</span>: {
             <span class="json-key">life</span>: <span class="json-value">null</span>,
             <span class="json-key">mass</span>: <span class="json-value">5.6846e+26</span>
          }
       }
    ]</code></pre>

Example replacer - 但不一定。