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

Question

我正在使用 JSONPath 来 select 来自 JSON 文件的一些元素。我希望 selected 元素显示在 html 页面上。（整个 JSON 应该只突出显示 selected 标签）

最终结果应该是这样的 XPath Evaluator 在 Defient.js 站点中。

到目前为止，我已经设法使用 JSON 路径 select 我想要的元素并将其作为输出。此外，我可以在 <pre> 标记中使用 JSON.stringify 将 JSON 打印到网页。

我想知道的是我应该如何突出显示 selected 文本。输出不能简单地用于生成正则表达式，因为它可能匹配未被 JSON 路径过滤器 select 编辑的字段。

Answer 1

如您所说，您可以获得路径，只需用 html 标记包装相应路径的值并给出 class。然后你可以用 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 - 但不一定。

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

Highlight selected text from JSONPath using CSS

javascript

css

xpath

json

jsonpath