TransWikia.com

¿Cómo obtener con javascript DOM el texto de los elementos , pero excluyendo los elementos hijos que éstos pueda contener?

Stack Overflow en español Asked by Pablo David Martín on January 12, 2021

Me gustaría obtener el texto (no texto plano) de cada párrafo, pero sin el de los posibles enlaces que puedan tener.

*Por favor, explíquenlo en javascript puro, nada de jQuery.

<html>

<head></head>

<body>

<p>Este es un párrafo sin enlaces.</p>

<p>Este es un párrafo con <a href="https://www.google.com">enlace</a>.</p>

<p>Aquí hay otro <a href="https://www.bing.com">link</a> más.</p>


<script type="text/javascript" async="async">

for (i = 0; i < document.getElementsByTagName('p').length; i++){
        

    document.getElementsByTagName('p')[i].innerHTML;
            
        
}        

</script>

</body>

</html>

En este ejemplo tendría que obtener los siguientes textos:

“Este es un párrafo sin enlaces. Este es un párrafo con . Aquí hay otro más.”

Es decir, debe excluir el texto contenido solo en los elementos hijo a.

Muchas gracias y espero que alguien me pueda ayudar.

3 Answers

Te anexo un ejemplo en javascript como lo solicitas:

for (i = 0; i < document.getElementsByTagName('p').length; i++){
        

    var valor = document.getElementsByTagName('p')[i];
    
    var valor2 = valor.childNodes[0].textContent;
    
    console.log(valor2);
        
}      
<html>

<head></head>

<body>

<p>Este es un párrafo sin enlaces.</p>

<p>Este es un párrafo con <a href="https://www.google.com">enlace</a>.</p>

<p>Aquí hay otro <a href="https://www.bing.com">link</a> más.</p>

</body>

</html>

Ejemplo 2, eliminar solo tags <a> y obtener datos con innerHTML:

for (i = 0; i < document.getElementsByTagName('p').length; i++){
   
   //obtener elementos <a>
   var elements = document.getElementsByTagName('a');
   
   //remover elementos <a>
   while (elements[0])
   elements[0].parentNode.removeChild(elements[0])   
  
   var valor = document.getElementsByTagName('p')[i].innerHTML;
        
   console.log(valor);
}
<html>

<head></head>

<body>

<p>Este es <b>un párrafo</b> sin enlaces.</p>

<p>Este <i>es un párrafo</i> con <a href="https://www.google.com">enlace</a>.</p>

<p>Aquí <u>hay otro</u> <a href="https://www.bing.com">link</a> más.</p>

</body>

</html>

Lo único que debes hacer es apuntar al nodo directo para poder obtener su valor, en este caso apuntando a la posición 0 y utilizando textContent para obtener el texto: childNodes[0].textContent.

Espero sea de tu ayuda. Saludos.

Answered by Blas David O. M. on January 12, 2021

Tal vez esto te pueda ayudar DOM

<html>

<head></head>

<body>

<p id="1">Aquí hay otro <a id="2" href="https://www.bing.com">link</a> más.</p>


<script type="text/javascript" async="async">

var parrafo = document.getElementById('1');
var enlaces = document.getElementById('2');

var eliminar = parrafo.removeChild(enlaces);

console.log(eliminar);
   

</script>

</body>

</html>

Answered by Vick Muñoz on January 12, 2021

Puedes hacer dentro del for otro for más, pero esta vez para recorrerte cada una de las 'p'. Y luego poner un condicional en el que borre entre 'a' y '/a'.

for (i = 0; i < document.getElementsByTagName('p').length; i++){
    for (j = 0; j <  document.getElementsByTagName('p')[i].length; j++){
      //código que elimine los caracteres de j entre <a> y </a>      

    }            

}    

Answered by Luis on January 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP