Difference when capturing the text

Question

Difference when capturing the text

Navigation

#1 by (8 votes)
#2 by (3 votes)

6

What is the difference when using .text and .innerHTML to get the text?

window.addEventListener('DOMContentLoaded',() => {
var pattern = /^joya[0-9]/,
    getting = document.getElementsByTagName('*'),
    elements = [];
    Array.from(getting).forEach(clase => {
     if(pattern.test(clase.className)) elements.push(clase);
    });
    
    /* Mostrar */
    
    elements.forEach(i => {  /* .text */
     console.log('Con .text: ' + i.text);
    });
    elements.forEach(i => { /* .innerHTML */
     console.log('Con innerHTML: ' + i.innerHTML);
    });
    
    
});

<a class='joya1' href='' value="joyita1">joyyy1</a>
<a class='joya2' href='' value="joyita2">joyyy2</a>
<a class='joya3' href='' value="joyita3">joyyy3</a>

javascript

asked by Eduardo Sebastian 25.09.2017 в 12:32

source

2 answers

8

In one case it returns the text that is displayed ( text ) and in the other the HTML code ( innerHTML ).

In your example they match, but if you modify it a bit you can see the difference:

window.addEventListener('DOMContentLoaded',() => {
var pattern = /^joya[0-9]/,
    getting = document.getElementsByTagName('*'),
    elements = [];
    Array.from(getting).forEach(clase => {
     if(pattern.test(clase.className)) elements.push(clase);
    });
    
    /* Mostrar */
    
    elements.forEach(i => {  /* .text */
     console.log('Con .text: ' + i.text);
    });
    elements.forEach(i => { /* .innerHTML */
     console.log('Con innerHTML: ' + i.innerHTML);
    });
    
    
});

<a class='joya1' href='' value="joyita1"><b>joyyy1</b></a>
<a class='joya2' href='' value="joyita2"><i>joyyy2</i></a>
<a class='joya3' href='' value="joyita3">joyyy3</a>

answered by 25.09.2017 в 12:39

Error with PHP when saving data in mysql [closed] What is the difference between char name [] and char * name in C?

score 3 · Accepted Answer

Although the results will be similar in some cases, they will not be the same at all (as indicated by Asier in his answer ). Now, there are more differences than just those indicated there.

I will take the opportunity to introduce two more that do not appear in the question, but which are relevant to this case: .textContent and .innerText (there is a .outerText but is not standard).

So that each of them works:

.innerHTML returns text and code (in the form of text), that is, it will return the labels and the text contained in them.
.innerText returns only the rendered text. The key part is "rendering". That means that only the text that the browser can display will be displayed (ie if there is a script the code inside will not be displayed as text).
.textContent returns only the text. And it is important to identify that by text in this case we refer to all the content text (eg if there is a script , the code will be displayed as text even if it is not visible on the page).
.text works as a short read-only version of .textContent ... although the "read only" is not something that browsers impose. In addition, its behavior will change depending on the element in which it is used and is considered obsolete for some elements .

We are going to see an example with these four functions in the body element (one of those that differs and that is considered obsolete from HTML 5 ):

var miBody = document.getElementById("miBody");

console.log(miBody.innerHTML);
console.log(miBody.textContent);
console.log(miBody.text);
console.log(miBody.innerText);

<body id="miBody">
  <a href="miA" href="http://es.stackoverflow.com">Soy un enlace</a>
  <script id="miScript">
  var variable = 1;
  </script>
  Texto suelto
</body>

Why does it return an empty string for .text ? Interesting fact: in previous versions of HTML, the attribute text in body was used to change the color of the source, although that functionality is considered obsolete for years, browsers still use it. For example, if you make miBody.text = "#ff0000"; you would expect the text of the page to change to # ff0000, right? Do not! The color of the text will change to red:

var miBody = document.getElementById("miBody");

miBody.text = "#ff0000";

<body id="miBody">
  <a href="miA" href="http://es.stackoverflow.com">Soy un enlace</a>
  <script id="miScript">
  var variable = 1;
  </script>
  Texto suelto
</body>

It is an example of an attribute that should work in one way, but browsers use it in a different way. Instead of using .text you should use .innerText or .textContent , which are standard and supported by all modern browsers.