UltraHTML 使用教程

UltraHTML 使用教程

ultrahtml 项目地址: https://gitcode.com/gh_mirrors/ul/ultrahtml

1. 项目介绍

UltraHTML 是一个轻量级、无依赖的 HTML 解析库，兼容任何 JavaScript 运行环境。它提供了以下特性：

• 微小的、容错的、友好的 HTML 类似解析器，支持 HTML、Astro、Vue、Svelte 以及其他 HTML 类似语法。
• 内置的 AST 遍历工具。
• 内置的转换工具，便于输出操作。
• 自动但可配置的内容过滤。
• 方便的 HTML 模板工具。
• querySelector 和 querySelectorAll 支持。
• 异步和同步的 API。

2. 项目快速启动

首先，确保您的开发环境中已经安装了 Node.js。然后，通过以下命令安装 UltraHTML：

npm install ultrahtml

以下是使用 UltraHTML 解析和渲染 HTML 的基本示例：

const { parse, render } = require('ultrahtml');

// 解析 HTML 字符串为 AST
const ast = parse('<h1>Hello world!</h1>');

// 将 AST 转换回 HTML 字符串
const output = render(ast);
console.log(output); // 输出: <h1>Hello world!</h1>

3. 应用案例和最佳实践

3.1 HTML 内容过滤

UltraHTML 提供了内置的内容过滤功能，可以自动移除危险的 <script> 标签。以下是如何使用过滤功能的一个例子：

const { parse, render, transform } = require('ultrahtml');
const sanitize = require('ultrahtml/transformers/sanitize');

const ast = parse('<h1>Hello world! <script>alert("xss")</script></h1>');

const output = transform(ast, [sanitize()]);
console.log(output); // 输出: <h1>Hello world!</h1>

3.2 元素替换

你可以使用 transform 函数和 swap 转换器来替换 HTML 中的元素：

const { transform, html } = require('ultrahtml');
const swap = require('ultrahtml/transformers/swap');

const output = transform('<h1>Hello world!</h1>', [
  swap({
    h1: 'h2',
    h3: (props, children) => html`<h2 class="ultra">${children}</h2>`
  })
]);
console.log(output); // 输出: <h2 class="ultra">Hello world!</h2>

4. 典型生态项目

UltraHTML 可以与许多前端框架和技术栈一起使用。以下是一些可能与之集成的生态项目示例：

• Vue: 使用 UltraHTML 作为 Vue 的 HTML 解析器。
• Astro: 在 Astro 项目中解析和操作 HTML 内容。
• Svelte: 在 Svelte 应用中处理 HTML 字符串。

这些只是一些例子，UltraHTML 的应用场景非常广泛，可以根据具体的项目需求进行灵活运用。

ultrahtml 项目地址: https://gitcode.com/gh_mirrors/ul/ultrahtml