javascript - Ways of comparing Text Content between HTML Elements - Stack Overflow

admin管理员组

文章数量:1391991

As the title says, I am looking for a way of paring the Text content of an HTML Element with another HTML Elements's Text content and only if they are identical, alert a message. Any thoughts? Greatly appreciate it! (Posted with code): For example, I can't equalize the remItem's content with headElms[u]'s content.

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

}

As the title says, I am looking for a way of paring the Text content of an HTML Element with another HTML Elements's Text content and only if they are identical, alert a message. Any thoughts? Greatly appreciate it! (Posted with code): For example, I can't equalize the remItem's content with headElms[u]'s content.

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

}

• javascript

Share Improve this question Follow edited Jan 17, 2012 at 1:59 Konstantinos Kaimakis asked Jan 17, 2012 at 1:32 Konstantinos KaimakisKonstantinos Kaimakis 2111 silver badge33 bronze badges 4

• What did you try so far, also, put some mock up HTML we can give you examples built upon – Itay Moav -Malimovka Commented Jan 17, 2012 at 1:33
• All this code is dealing with other HTML Elements created within the .js file. The only external and pure HTML Element is the remItem which goes directly to the HTML file to get the content. The headElms[u] content though is generated through javascript. Still, I am trying to pare the two contents and if identical (==) then an alert should occur. It has to do with my check Element's content function. – Konstantinos Kaimakis Commented Jan 17, 2012 at 1:56
• Just added this point to my answer, but you also need to make sure the leading and trailing whitespace is identical. So if the original HTML has linebreaks or indentation, but the generated HTML doesn't, it won't be considered equal. – user1106925 Commented Jan 17, 2012 at 2:00
• Yes, definitely. Besides, I am originally taking the pure HTML's file content and then generating it again in another created Element through JavaScript. Then through the Unchecking of a checkbox, that element with the content that was unchecked should be removed. – Konstantinos Kaimakis Commented Jan 17, 2012 at 2:05

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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

Using NaN to ensure a false result if one or both elements don't exist.

---

If you don't like the verbosity of it, or you need to do this more than once, create a function that hides away most of the work.

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

Then invoke it...

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

---

To address your updated question, there isn't enough info to be certain of the result, but here are some potential problems...

• obj.parentNode.parentNode.childNodes[1] ...may give different element in different browsers

• "System found a matching element ... and deleted it!" ...if you're deleting elements, you need to account for it in your u index because when you remove it from the DOM, it will be removed from the NodeList you're iterating. So you'd need to decrement u when removing an element, or just iterate in reverse.

• .textContent isn't supported in older versions of IE

• Whitespace will be taken into consideration in the parison. So if there are different leading and trailing spaces, it won't be considered a match.

If you're a jQuery user....

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

The triple equals is preferred.

To pare two specific elements the following should work:

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

I will highly remend using jQuery for this kind of parison. jQuery is a javascript library that allows you to draw values from between HTML elements.

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

continue js here

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

for a quick intro to jQuery...

First, download the file from jQuery. and save it into a js file in your js folder. Then link to the file. I do it this way:

Of course, I assume that you're not doing inline js scripting...it is always remended too.

A simple getText function is:

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;
    }
  }
}());

To pare the content of two elements:

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

本文标签： javascriptWays of comparing Text Content between HTML ElementsStack Overflow