# @ali-tas/htmldiff-js 中文文档

规范地址：https://npmcn.com/package/%40ali-tas/htmldiff-js/

版本：2\.0\.1
npm 元数据更新时间：2024-11-11T19:56:41.072Z
中文译文更新时间：2026-11-05T19:31:57.999Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ali-tas/htmldiff-js
原文对照：https://npmcn.com/package/%40ali-tas/htmldiff-js/?lang=original
项目主页：https://github.com/alitas/htmldiff-js#readme
源码仓库：https://github.com/alitas/htmldiff-js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：53.7 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2020-10-22T18:25:08.271Z
- 最新版本发布：2024-11-11T19:56:40.896Z
- 近 30 天下载量：35902（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

HtmlDiff的JavaScript端口. 网络本身是 HtmlDiff 的 C# 端口

## 安装

```sh
npm install @ali-tas/htmldiff-js
```

也可以使用：`pnpm add @ali-tas/htmldiff-js`、`yarn add @ali-tas/htmldiff-js`、`bun add @ali-tas/htmldiff-js`

## README

# 读取

类型标端口 [htmldiff-js (韩语)](https://github.com/dfoverdx/htmldiff-js),这是 JavaScript 端口 [HtmlDiff (英语). 净额](https://github.com/Rohland/htmldiff.net) 它本身就是鲁比执行的C#港口, [Htmldiff 图像](https://github.com/myobie/htmldiff/)。 。 。 .

## 项目说明

Diffs 2 HTML 块,并返回包含两个块的磁盘 `<ins>` 财务报告和审定财务报表 `<del>` 要素。 这些要素的类别是: `ins.diffins` 对于新的代码, `del.diffdel` 用于删除的代码,以及 `del.diffmod` 财务报告和审定财务报表 `ins.diffmod` 用于已修改代码的章节.

对于"特殊标记"(主要是样式标记,例如: `<em>` 财务报告和审定财务报表 `<strong>`, (中文(简体) ), `ins.mod` 元素被插入到新样式中.

详情请参见本文 [博客文章](https://web.archive.org/web/20180106000348/http://www.rohland.co.za:80/index.php/2009/10/31/csharp-html-diff-algorithm/) htmlDiff的作者罗克兰所著. 网易网.

**说明**:分解算法不完美. 一个例子是,如果一个新的 `<p>` 结尾与上一个字符串相同 `<p>` 标记有,两个 `<ins>` 将创建标签: 从第一个字符串的开头开始一个 `<p>` 和第二个 `<p>` 包含全部内容直到后导常见字符串开始点。 这有点令人沮丧,但是我并没有写出算法(而且真的不理解);我只把它移植了.

## 使用量

### 电量

```html
<html>
  <body>
    <div id="oldHtml">
      <p>Some <em>old</em> html here</p>
    </div>

    <div id="newHtml">
      <p>Some <b>new</b> html goes here</p>
    </div>

    <div id="diffHtml"></div>
  </body>
</html>
```

#### Java 脚本

```javascript
import HtmlDiff from 'htmldiff-js';

const oldHtml = document.getElementById('oldHtml');
const newHtml = document.getElementById('newHtml');
const diffHtml = document.getElementById('diffHtml');

diffHtml.innerHTML = HtmlDiff.execute(oldHtml.innerHTML, newHtml.innerHTML);
```

## 常见问题

### @ali-tas/htmldiff-js 是什么？

HtmlDiff的JavaScript端口\. 网络本身是 HtmlDiff 的 C\# 端口

### 如何安装 @ali-tas/htmldiff-js？

在项目目录运行 npm install @ali-tas/htmldiff-js，或使用 pnpm add / yarn add / bun add。

### @ali-tas/htmldiff-js 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ali-tas/htmldiff-js 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ali-tas/htmldiff-js 可以商用吗？

@ali-tas/htmldiff-js 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ali-tas/htmldiff-js 的下载量有多少？

根据 npm 官方下载统计，@ali-tas/htmldiff-js 在 2026/10/06 – 2026/11/04 这 30 天内被下载 35,902 次，日均约 1,197 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ali-tas/htmldiff-js 还在维护吗？

最新版本 2\.0\.1 发布于 2024/11/12（2 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/10/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。