Question

我试图比较两个刺痛的跨度。

例如，我有输入：

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，但回复对我不起作用，因为：

节点＆＃39;订单可以改变
对于最后一个属性
文字可以使用小写或大写

这个问题也有点旧。所以我想可能有一个新的我可以遵循？

Answer 1

你能做的是：

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

您需要如何准确匹配事物的细节以及它的工作频率取决于您要完全实现的目标以及HTML的来源，因此YMMV。

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

Answer 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)
);

这可能会带来一些红色的鲱鱼，但元素越大的可能性就越大。

如何比较两个HTML元素渲染

2 个答案: