Javascript 如何使用ace解析HTML中显示的JSON

我正在尝试创建一个chrome扩展，它使用ace解析HTML中显示的JSON文件，然后创建一个JSON文件并将其下载到系统磁盘。但是，我不确定如何解析这个标记并从中创建json文件

我是否需要收集所有元素，包括嵌套的子元素，然后创建一个算法从头开始创建json文件？不确定是否有更好的方法来做到这一点

以下是标记：

<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>

---

要仅获取文本而不获取任何标记，请尝试使用的组合，将其复制到，然后从剪贴板中

只需获取ace_文本层元素的innerText，无需解析任何内容。不过，最好在中使用ace编辑器的API来提取其内部文本。