可将DOM反解析为JSON的反模板引擎有哪些？

Great question! Reverse templating (sometimes called "template hydration" or "data extraction from rendered DOM") is a handy pattern when you need to reconstruct the original data model from HTML generated by a template. Below are popular tools and approaches that support this functionality:

Tools with Built-in or Community-Supported Reverse Templating #

1. Ractive.js #

Ractive was built with two-way data binding and DOM hydration at its core. If you have the original template and the rendered DOM, Ractive can "hydrate" the DOM into a live instance, giving you direct access to the underlying data object. It automatically maps template placeholders (like {{name}}) to values in the DOM, even handling loops and conditionals seamlessly.

2. Vue.js (Hydration Mode) #

Vue's server-side rendering (SSR) hydration feature isn’t just for adding reactivity to server-rendered HTML—it can also extract data from existing DOM that matches your Vue template. When you initialize a Vue instance with the hydrate: true option and the original template, Vue parses the DOM and populates the data model with values from the rendered elements.

3. AngularJS (Legacy) #

While AngularJS is no longer actively developed, its two-way binding and scope system make data extraction straightforward for legacy projects. If you can reattach the original scope to the rendered DOM, you can directly retrieve the data model that generated the HTML.

4. Handlebars + Community Utilities #

Handlebars doesn’t have native reverse templating, but community libraries like handlebars-reverse extend it for this purpose. These tools let you define your Handlebars template and extract data from a DOM element by matching the template’s structure—including partials, loops, and helpers.

5. Mustache + Custom Parsers #

Mustache also lacks built-in reverse support, but you can build custom extraction logic using DOM parsers like Cheerio (Node.js) or native browser DOM APIs. Libraries like mustache-extract simplify this by mapping Mustache placeholders to DOM elements and pulling their values.

How It Generally Works #

Most reverse templating tools follow this flow:

1. Template Matching: The engine compares your template’s structure (placeholders, loops, conditionals) to the rendered DOM.
2. Value Extraction: It pulls text content, attribute values, etc., from DOM elements corresponding to template variables.
3. Data Reconstruction: It assembles these values into a JSON/JS object, preserving the original data structure (arrays for loops, nested objects for nested templates).

Example: Extracting Data with Ractive.js #

Suppose you have this template:

<template id="user-template">
  <div class="profile">
    <h1>{{fullName}}</h1>
    <p>Email: <a href="mailto:{{email}}">{{email}}</a></p>
    <h3>Skills:</h3>
    <ul>
      {{#skills}}
      <li>{{name}} (Level: {{level}})</li>
      {{/skills}}
    </ul>
  </div>
</template>

And this rendered DOM:

<div class="profile">
  <h1>John Doe</h1>
  <p>Email: <a href="mailto:john@example.com">john@example.com</a></p>
  <h3>Skills:</h3>
  <ul>
    <li>JavaScript (Level: Advanced)</li>
    <li>CSS (Level: Intermediate)</li>
  </ul>
</div>

You can extract the data like this:

const template = document.getElementById('user-template').innerHTML;
const ractive = new Ractive({
  el: '.profile',
  template: template,
  data: {} // Ractive hydrates this from the DOM
});

const extractedData = ractive.get();
// Result:
// {
//   fullName: "John Doe",
//   email: "john@example.com",
//   skills: [
//     { name: "JavaScript", level: "Advanced" },
//     { name: "CSS", level: "Intermediate" }
//   ]
// }

Key Considerations #

• Template Uniqueness: Add unique identifiers (like data-template-key attributes) to dynamic elements to avoid ambiguous matches.
• Complex Templates: Loops and conditionals require the engine to correctly identify repeated or conditional sections—test with your specific template structure to ensure accuracy.
• Performance: For large DOM trees, reverse templating can be resource-intensive; optimize by targeting specific sections instead of the entire DOM.

内容的提问来源于stack exchange，提问作者humanityANDpeace