如何比较两个 HTML 元素的渲染答案

【问题标题】：How to compare two HTML elements rendering如何比较两个 HTML 元素的渲染
【发布时间】：2018-01-23 08:08:55
【问题描述】：

我正在尝试比较两个刺痛跨度。

例如，我有输入：

var span1 = "<SPAN style=\"FONT-SIZE: 9pt; FONT-FAMILY: Arial; FONT-WEIGHT: bold\">hello<FONT style=\"FONT-FAMILY: Wingdings; COLOR: #ffff00\">ll</FONT>hi<BR><BR></SPAN>";

var span2 = "<span style=\"font-weight: bold; font-size: 9pt; font-family: Arial;\">hello<font style=\"color: #FFFF00; font-family: Wingdings;\">ll</font>hi<br><br></span>"

这两个跨度将在 UI 中呈现相同的内容。但是我找不到使用 JavaScript 或 JQuery 证明相等的正确方法。

我查看了这个question，但响应对我不起作用，因为：

节点的顺序可以改变
最后一个属性不需要分号
文本可以使用小写或大写

这个问题也有点老了。所以我想可能有一个新的我可以关注？

【问题讨论】：

我们是否应该忽略 font 现在在 HTML 5 中已经过时并且在 1999 年左右在 HTML 4.0.1 中被弃用的事实？
您是否要确定它们是否呈现相同？怎么样，style="font: bold Arial 9pt;" 也应该是等价的吗？
这两个字符串不会在 UI 中呈现相同的内容。 span1 在hello 和11 之间以及11 和hi 之间有一个空格，而span2 没有。
@James 这就是我苦苦挣扎的地方：有许多相同的风格组合，我需要捕捉所有这些
@MikeMcCaughan 你是完全正确的。但是空间不是一个大问题，因为我可以删除所有空间。可能主要关心的是如何比较所有属性和跨度的孩子。不过我会删除空格。

标签： javascript jquery html

【解决方案1】：

你可以做的是：

通过将 HTML 分配给现有元素的 innerHTML 属性来呈现元素
递归遍历每个生成树的 DOM
对于每个元素节点，检查元素名称，并使用getComputedStyle方法比较所有计算样式
对于文本节点，只需比较内容。您可能需要进行一些清理（修剪、替换空格、可能转换为规范编码...）

您需要多精确地匹配事物以及这将多久工作一次的详细信息在很大程度上取决于您要准确实现的目标以及 HTML 的来源，因此是 YMMV。

可能还有涉及渲染为图像和比较图像的选项，但是这在浏览器中并不是很简单（但如果您使用无头浏览器执行此服务器端，则可能是这样）。

【讨论】：

【解决方案2】：

理论上，您正在寻找一个字谜：

var span1 =
    '<SPAN style="FONT-SIZE: 9pt; FONT-FAMILY: Arial; FONT-WEIGHT: bold">hello <FONT style="FONT-FAMILY: Wingdings; COLOR: #ffff00">ll</FONT> hi<BR><BR></SPAN>';

var span2 =
    '<span style="font-weight: bold; font-size: 9pt; font-family: Arial;">hello<font style="color: #FFFF00; font-family: Wingdings;">ll</font>hi<br><br></span>';

const processForAnagram = str => str.replace(/(\s|"|'|;)/gi, '').toLowerCase().split('').sort().join('');
const isAnagram = (first, second) =>
    processForAnagram(first) === processForAnagram(second);

console.log(
    isAnagram(span1, span2)
);

这可能会出现一些红鲱鱼，但元素越大的可能性不大。

【讨论】：