Question

正如标题所说，我正在寻找一种方法来将HTML元素的Text内容与另一个HTML Elements的Text内容进行比较，并且只有它们相同时才会提醒消息。有什么想法吗？非常感谢！（与代码一起发布）：例如，我无法使用headElms [u]的内容来均衡remItem的内容。

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!");
        }
    }

}

Answer 1

var a = document.getElementById('a');
var b = document.getElementById('b');

var tc_a = a ? a.textContent || a.innerText : NaN;
var tc_b = b ? b.textContent || b.innerText : NaN;

if( tc_a === tc_b ) 
   alert( 'equal' );

如果一个或两个元素不存在，请使用NaN确保false结果。

如果您不喜欢它的详细程度，或者您需要多次执行此操作，请创建一个隐藏大部分工作的函数。

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] ...可能会在不同的浏览器中提供不同的元素
"System found a matching element ... and deleted it!" ...如果您要删除元素，则需要在u索引中对其进行说明，因为当您从DOM中删除它时，它将从 NodeList 你正在迭代。因此，在删除元素时需要递减u，或者反向迭代。

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

Answer 2

如果您是jQuery用户....

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

三等于首选。

Answer 3

要比较以下两个特定元素：

<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!!!");
    }
});

Answer 4

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

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

继续js here

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

快速介绍jQuery ...

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

当然，我假设您没有使用内联js脚本编写...也总是建议使用。

Answer 5

一个简单的 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元素之间的文本内容的方法

5 个答案: