npm 包 @markedjs/html-differ 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常常需要对两个 HTML 标签中的内容进行比较。然而，直接对字符串进行比较是不可取的，因为字符串中包含了许多标签属性等等。这时候，我们需要借助一些专用的工具来进行比较。其中，一个非常优秀的 npm 包就是 @markedjs/html-differ。

安装

使用 npm 进行安装：

npm install @markedjs/html-differ

使用

比较 HTML 标签

在以下示例中，我们用 @markedjs/html-differ 比较两个简单的 HTML 标签：

const HtmlDiffer = require('@markedjs/html-differ').HtmlDiffer;
const htmlDiffer = new HtmlDiffer();
 
const a = '<div>foo</div>';
const b = '<div>bar</div>';
const result = htmlDiffer.isEqual(a, b);
console.log(result); // false

在上述代码中，我们使用 HtmlDiffer 类和 isEqual 方法来比较两个 HTML 标签。isEqual 方法在比较两个 HTML 标签时，会自动将其转化为 DOM 结构，然后对比它们之间的差异。

配置选项

有时候，我们需要自定义比较器的行为。这时候，我们可以使用 HtmlDiffer 对象进行配置自定义，如下所示：

var options = {
    ignoreAttributes: [ 'style' ],
    compareAttributesAsJSON: [ 'class' ]
};
 
const htmlDiffer = new HtmlDiffer(options);

在上述代码中，我们配置了 HtmlDiffer 对象的 ignoreAttributes 属性，它将忽略 HTML 标签的 style 属性。而 compareAttributesAsJSON 数组指示比较 HTML 标签的 class 属性时，将其作为 JSON 对象进行比较。

指导意义

通过学习 @markedjs/html-differ 的使用，我们可以发现该 npm 包是一套非常实用的 HTML 标签比较工具。通过它，我们可以快速地比较两个 HTML 标签的异同，并在需要的时候对其进行自定义配置。在实际开发中，减少了我们不必要的时间和功夫，增强了代码的可读性及可维护性。

示例代码

-- -------------------- ---- -------
----- ---------- - --------------------------------------------
----- ---------- - --- -------------
 
----- - - -----------------
----- - - -----------------
----- ------ - --------------------- ---
-------------------- -- -----
 
----- ------- - -
    ----------------- - ------- --
    ------------------------ - ------- -
--
 
----- --------------------- - --- --------------------
 
----- - - ----- -----------------------
----- - - ----- -----------------------
----- ------- - -------------------------------- ---
--------------------- -- ----

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/164335