Javascript 比较HTML元素之间文本内容的方法

正如标题所说，我正在寻找一种方法来比较一个HTML元素的文本内容与另一个HTML元素的文本内容，并且只有当它们完全相同时，才会发出警告消息。有什么想法吗？非常感谢！ 使用代码发布：例如，我无法将汇款人的内容与headElms[u]的内容相等

else if (obj.type == 'checkbox' && obj.checked == false) {
    var subPal = document.getElementById('submissionPanel');
    var remItem = obj.parentNode.parentNode.childNodes[1].textContent;
    alert("You have disselected "+remItem);

    for (var j=0; j < checkSum.length; j++) {
        if (remItem == checkSum[j]) {
            alert("System found a match: "+checkSum[j]+" and deleted it!");
            checkSum.splice(j,1);
        } else {
            //alert("There were no matches in the search!");
        }
    }
    alert("Next are...");
    alert("This is the checkSum: "+checkSum);
    alert("Worked!!!");

    var headElms = subPal.getElementsByTagName('h3');
    alert("We found "+headElms.length+" elements!");

    for (var u=0; u < headElms.length; u++){
        alert("YES!!");
        if (remItem == headElms[u].textContent) {
            alert("System found a matching element "+headElms[u].textContent+" and deleted it!");
        }
        else {
            alert("NO!!");
            alert("This didn't work!");
        }
    }

}

如果一个或两个元素都不存在，则使用NaN确保结果为假

如果您不喜欢它的冗长，或者您需要多次这样做，请创建一个隐藏大部分工作的函数

function equalText(id1, id2) {
    var a = document.getElementById(id1);
    var b = document.getElementById(id2);
    return (a ? a.textContent || a.innerText : NaN) ===
           (b ? b.textContent || b.innerText : NaN);
}

然后调用它

if( equalText('a','b') ) 
   alert( 'equal' );

为了解决您更新的问题，没有足够的信息来确定结果，但这里有一些潜在的问题

obj.parentNode.parentNode.childNodes[1]…在不同的浏览器中可能会提供不同的元素

系统找到了匹配的元素。。。并且删除了它。。。如果要删除元素，则需要在u索引中对其进行说明，因为从DOM中删除元素时，它将从正在迭代的节点列表中删除。因此，在删除元素时，您需要减小u，或者只是反向迭代

.textContent在旧版本的IE中不受支持

比较时将考虑空格。因此，如果有不同的前导空格和尾随空格，则不会将其视为匹配

如果一个或两个元素都不存在，则使用NaN确保结果为假

如果您不喜欢它的冗长，或者您需要多次这样做，请创建一个隐藏大部分工作的函数

function equalText(id1, id2) {
    var a = document.getElementById(id1);
    var b = document.getElementById(id2);
    return (a ? a.textContent || a.innerText : NaN) ===
           (b ? b.textContent || b.innerText : NaN);
}

然后调用它

if( equalText('a','b') ) 
   alert( 'equal' );

为了解决您更新的问题，没有足够的信息来确定结果，但这里有一些潜在的问题

obj.parentNode.parentNode.childNodes[1]…在不同的浏览器中可能会提供不同的元素

系统找到了匹配的元素。。。并且删除了它。。。如果要删除元素，则需要在u索引中对其进行说明，因为从DOM中删除元素时，它将从正在迭代的节点列表中删除。因此，在删除元素时，您需要减小u，或者只是反向迭代

.textContent在旧版本的IE中不受支持

比较时将考虑空格。因此，如果有不同的前导空格和尾随空格，则不会将其视为匹配

---

如果您是jQuery用户

var a = $('#element1').text(),
    b = $('#element2').text();
if (a === b) {
  alert('equal!');
}

---

三重相等是首选。

如果您是jQuery用户

var a = $('#element1').text(),
    b = $('#element2').text();
if (a === b) {
  alert('equal!');
}

---

最好使用三重相等。

要比较两个特定元素，应采用以下方法：

<div id="e1">Element 1</div>
<div id="e2">Element 2</div>

$(document).ready(function(){
    var $e1 = $('#e1'),
        $e2 = $('#e2'),
        e1text = $e1.text(),
        e2text = $e2.text();

    if(e1text == e2text) {
        alert("The same!!!");
    }
});

---

要比较两个特定元素，应采用以下方法：

<div id="e1">Element 1</div>
<div id="e2">Element 2</div>

$(document).ready(function(){
    var $e1 = $('#e1'),
        $e2 = $('#e2'),
        e1text = $e1.text(),
        e2text = $e2.text();

    if(e1text == e2text) {
        alert("The same!!!");
    }
});

---

我强烈推荐使用jQuery进行这种比较。jQuery是一个javascript库，允许您从HTML元素之间提取值

var x = $('tag1').text();
var y = $('tag2').text();

在这里继续

if(x===y){
//do something
}

要快速介绍jQuery

首先，从jQuery.com下载该文件，并将其保存到js文件夹中的js文件中。 然后链接到该文件。我是这样做的：

---

当然，我假设您没有使用内联js脚本……我们也一直建议您使用它。

我强烈建议您使用jQuery进行此类比较。jQuery是一个javascript库，允许您从HTML元素之间提取值

var x = $('tag1').text();
var y = $('tag2').text();

在这里继续

if(x===y){
//do something
}

要快速介绍jQuery

首先，从jQuery.com下载该文件，并将其保存到js文件夹中的js文件中。 然后链接到该文件。我是这样做的：

当然，我假设您没有执行内联js脚本编写……这也是一直以来的建议。

一个简单的getText函数是：

var getText = (function() {
  var div = document.createElement('div');

  if (typeof div.textContent == 'string') {
    return function(el) {
      return el.textContent;
    }

  } else if (typeof div.innerText == 'string') {
    return function(el) {
      return el.innerText;
    }
  }
}());

要比较两种元素的内容：

  if (getText(a) == getText(b)) {
    // the content is the same
  }

一个简单的getText函数是：

var getText = (function() {
  var div = document.createElement('div');

  if (typeof div.textContent == 'string') {
    return function(el) {
      return el.textContent;
    }

  } else if (typeof div.innerText == 'string') {
    return function(el) {
      return el.innerText;
    }
  }
}());

要比较两种元素的内容：

  if (getText(a) == getText(b)) {
    // the content is the same
  }

---

到目前为止，您尝试了什么？另外，放置了一些模拟HTML，我们可以为您提供一些构建的示例。所有这些代码都处理在.js文件中创建的其他HTML元素。唯一的外部纯HTML元素是直接转到HTML文件以获取内容的汇项。headElms[u]内容是通过javascript生成的。尽管如此，我仍试图比较这两个内容，如果相同==则应发出警报。这与我的check元素的content函数有关。刚才在我的答案中添加了这一点，但是你还需要确保前导和尾随空格是相同的。因此，如果原始HTML有换行符或缩进，但生成的HTML没有，它将被认为是不相等的。是的，肯定。此外，我最初获取纯HTML的文件内容，然后通过JavaScript在另一个创建的元素中再次生成它。然后，通过取消选中复选框，应该删除包含未选中内容的元素。到目前为止，您做了哪些尝试？另外，放置了一些模拟HTML，我们可以为您提供构建的示例。此代码处理的是在.js文件中创建的其他HTML元素。唯一的外部纯HTML元素是直接指向HTMLFI的汇款项

---

le需要获取内容。headElms[u]内容是通过javascript生成的。尽管如此，我仍试图比较这两个内容，如果相同==则应发出警报。这与我的check元素的content函数有关。刚才在我的答案中添加了这一点，但是你还需要确保前导和尾随空格是相同的。因此，如果原始HTML有换行符或缩进，但生成的HTML没有，它将被认为是不相等的。是的，肯定。此外，我最初获取纯HTML的文件内容，然后通过JavaScript在另一个创建的元素中再次生成它。然后，通过取消选中复选框，应该删除包含未选中内容的元素。+1-很高兴看到纯javascript答案…不幸的是，我使用jQuery获取数据，这是一个拐杖。请在编辑的代码块中推荐一个解决方案好吗？@KonstantinosKaimakis：我刚刚更新了我的答案。可能至少有两个潜在问题。如果没有更多信息，就无法确定。查看我的更新，如果您有问题，请告诉我。@amnotiam-是的，我再次更新了代码。在这一点上，不要与警报消息混淆；只是使用它们来测试每个代码块。现在，问题是，我正在尝试检查HTML元素的内容，看看它们是否彼此相等，以便具有相同内容的特定元素可以在以后删除。没有写任何删除代码yet@KonstantinosKaimakis：好的，但是如果除了内容被认为是不平等的以外，所有的东西都在工作，那么在没有看到内容的情况下，我无法回答这个问题。您是否已提醒所有内容，以查看其外观是否相同？如果是，则尝试向.textContent.length发出警报，查看字符串的长度是否相同。另外，仅供参考，最好使用console.log而不是alert。此外，您还可以创建一个工作演示。+1-很高兴看到纯javascript答案…不幸的是，我使用jQuery获取数据，这是一个拐杖。请您在编辑的代码块中推荐一个解决方案好吗？@KonstantinosKaimakis:我刚刚更新了我的答案。可能至少有两个潜在问题。如果没有更多信息，就无法确定。查看我的更新，如果您有问题，请告诉我。@amnotiam-是的，我再次更新了代码。在这一点上，不要与警报消息混淆；只是使用它们来测试每个代码块。现在，问题是，我正在尝试检查HTML元素的内容，看看它们是否彼此相等，以便具有相同内容的特定元素可以在以后删除。没有写任何删除代码yet@KonstantinosKaimakis：好的，但是如果除了内容被认为是不平等的以外，所有的东西都在工作，那么在没有看到内容的情况下，我无法回答这个问题。您是否已提醒所有内容，以查看其外观是否相同？如果是，则尝试向.textContent.length发出警报，查看字符串的长度是否相同。另外，仅供参考，最好使用console.log而不是alert。另外，您可以创建一个工作演示。对不起，我现在不使用jQuery。只是我试图用.textcont和“==”来比较两者，但仍然不起作用。对不起，我现在不使用jQuery。只是我试图用.textcont和“==”来比较这两个词，但仍然不起作用。