3

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 respuestas 3

1

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>      

    }            

}    
1
  • Gracias, Luis, pero he ahí la cuestión: cuál es el código que excluye (pero que no elimine) el texto de dentro de las etiquetas a. Aparte, no entiendo porque hay que recorrer doblemente los elementos de párrafo o p, si ya los tenía. Un saludo Commented el 6 mar. 2019 a las 9:13
1

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>

1
  • 1
    Gracias por tu ayuda, Vick, pero tengo que acceder a cada párrafo y éstos no tienen id, ni puedo asignársela porque sería un html de terceros, así que esta solución no me serviría. Un saludo Commented el 6 mar. 2019 a las 9:11
1

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.

5
  • Gracias, Blas David, por tu ayuda. Parece que es la respuesta que más me convence. Mi única duda es si puedo sustituir textContent por innerHTML. Necesitaría innerHTML porque no quisiera perder el posible formateo que tenga el texto, por ejemplo, si tiene negrita (b), cursiva (i), etc. Solo me basta con excluir el texto de los enlaces a, como me explicas. Un saludo Commented el 6 mar. 2019 a las 9:18
  • Hola @PabloDavidMartín, añadí un "Ejemplo 2" donde se obtiene algo parecido a lo que solicitas, con respecto a lo que mencionas yo te sugeriría buscar la manera de eliminar los tags "<a>" que necesites. Espero sea de ayuda. Saludos compañero. Commented el 6 mar. 2019 a las 16:25
  • Hola, Blas David. Lo estuve probando y ahora sí funciona. Ya lo que sería ideal -y no sé si serías capaz- es que se obtuviera el texto (formateado, es decir, innerHTML) de fuera de los enlaces, y los enlaces se mantuvieran intactos, porque sería para un código html de webs de terceros, así que tendría que respetar los enlaces que hayan. Lo que debo es solo obtener el texto de los párrafos que estén fuera de las etiquetas a. Si pudieras hacer ese pequeño retoque, ya sería genial. Un saludo, y perdona las molestias. Commented el 6 mar. 2019 a las 17:33
  • Creo entender lo que solicitas... por el momento no sé como realizarlo, sería cuestión de que ambos busquemos por nuestro lado el como se realiza dicha acción. Cuando tenga tiempo para investigarlo con gusto actualizo la respuesta. También te agradecería que marcaras dicha respuesta como correcta si fue de tu ayuda. Un saludo compañero. Commented el 6 mar. 2019 a las 19:35
  • De todos modos 'te enteras' un montón en el tema de javascript. Gracias por tu ayuda y por tu disponibilidad. Yo he investigado algo, pero todavía no he encontrado a nadie que lo haya explicado en otras webs, pero seguiré buscando más detalladamente. Un saludo, y gracias. Commented el 6 mar. 2019 a las 20:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.