How to parse JSON displayed in HTML with ace

Question

I am trying to create a chrome extension that parses a JSON file displayed in HTML with ace and then creates and downloads a json file to system disk. However, I am unsure of how to parse this markup and create a json file from it.

Will I need to gather all of the elements (including nested sub elements) and then create an algorithm to create a json file from scratch? Not sure if there is a better way to do this.

Here is how the json looks in browser

Here is the markup:

<div class="ace_layer ace_text-layer" style="padding: 0px 4px;">
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_paren ace_lparen">{</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"_id"</span>: <span class="ace_string">"123123123"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: <span class="ace_constant ace_numeric">1</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: null,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: <span class="ace_constant ace_numeric">420</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">  <span class="ace_variable">"dummy"</span>: <span class="ace_paren ace_lparen">{</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy-date"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"environment"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_paren ace_lparen">[</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_indent-guide">    </span>  <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_indent-guide">    </span>  <span class="ace_string">"dummy"</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_paren ace_rparen">]</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_constant ace_numeric">69</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_constant ace_numeric">124</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_variable">"dummy"</span>: <span class="ace_paren ace_lparen">{</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_indent-guide">    </span>  <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span>,</div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_indent-guide">    </span>  <span class="ace_variable">"dummy"</span>: <span class="ace_string">"dummy"</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px">    <span class="ace_paren ace_rparen">}</span></div>
   </div>
   <div class="ace_line_group" style="height:16px">
      <div class="ace_line" style="height:16px"><span class="ace_paren ace_rparen">}</span></div>
   </div>
</div>

Simply get `innerText` of `ace_text-layer` element, no need to parse anything. — wOxxOm, Mar 15 '21 at 20:02
However, it's probably better to extract the internal text of the Ace editor by using its API in [page context](/a/9517879). — wOxxOm, Mar 15 '21 at 20:03

score -1 · Answer 1 · answered Mar 17 '21 at 06:32

-1

To grab just the text and none of the markup, try using a combination of Selection, copy it to clipboard, then read the text from the clipboard

answered Mar 17 '21 at 06:32

iq42

1

How to parse JSON displayed in HTML with ace

1 Answers1