javascript - Highlight selected text from JSONPath using CSS -

i using jsonpath select elements json file. want selected elements displayed on html page. (the entire json should displayed selected tags highlighted)

the final result should xpath evaluator in defient.js site.

so far, i've managed use jsonpath select element want , output. also, can use json.stringify in <pre> tag print json webpage.

what want know how should go highlighting selected text. output can't used generate regex because might match fields not selected jsonpath filter.

as you've told can path, it'll matter of wrapping value corresponding path html tag , give class. can highlight 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 - not necessarily.