3

Estaba haciendo una regex que extrae los tags de html de un string para solo dejar el texto entre estas.. Ej:

"<a href='#'>go to <b>start</b> page</a>" 
capturo: <a href='#'>, <b>, </b> y </a>
resultado = go to start page
"<div>prueba</div>"
capturo: <div> y </div>
resultado = prueba

Mi regex es la siguiente:

var reg = new Regex((\<.+\>)|(\<\/.+\>)|(\<.+\/>), 'g')

Esta pensada para que si encuentra un tag de tipo <tag>, </tag> o <tag/> haga match para luego hacer un replace con mí regex y así solo me quedaría el texto... Pero me hace match también de los caracteres intermedios... He probado varias cosas utilizando (?:) para que no capture los caracteres entre los dos tag pero no me funciona.

También probé con:

\<.+\>(?:.)+\<\/.+\>

Me gustaría de ser posible saber como no hacer match a caracteres en el medio de una regex...

Pruebas de la regex

1 respuesta 1

2

Yo tuve que hacer algo parecido, si recuerdo bien use algo parecido a esto.

var content = [
   "<a required='ok' asdas='asdasd'>1<b>2</b></a>", // 12
   "<a required>1<b>2</b></a>", // 12
   '<a required href="asdasdasdasd"       >1<b>2</b></a>', // 12
   "<a>1<b>2</b></a> 3 </c>", // 12 3
   "<a-1>1<b>2</b></a1> 3 </c>", // 12 3
   "<a-1>1<b>2</b></a1> 3 <d-2-0> hello </d-2-0>  </c>", // 12 3 hello  
   "<a-1>1<b>2</b></a1> 3 <d-2-0> hello </d-2-0> c </c>", // 12 3 hello < 
]; 

var reg = /<.+?>/g


content.forEach(s => console.log(s + ' => ', s.replace(reg, '')))

EDIT:

Si lo que buscas es obtener el contenido de un elemento HTML como texto, es decir eliminando etiquetas, se puede hacer gracias a la propiedad innerText o textContent. Podrías incluso crear un elemento en memoria, añadir el contenido como innerHTML y luego usar los metodos mencionados anteriormente.

console.log('innerText', container.innerText)
console.log('textContent', container.textContent)
<div id="container" class="mi-clase">
  Mi contenido
  <br>
  <p foo="bar"> más contenido </p>
  <p data-otro-atributo="foo" >aquí (  ) van dos espacios</p>
</div>

innerText Uno de los incovenientes de este método es que devuelve un solo espacio en el caso de encontrar varios seguidos.

Aconsejo usar en su lugar textContent.

NOTA

En el código de ejemplo anterior aplicamos sobre un elemento existente. En el ejemplo siguiente generamos todo en memoria a partir de una cadena de texto.

function extraerTexto(contenido) {
 var contenedor = document.createElement('div');
 contenedor.innerHTML = contenido;
 var texto = contenedor.textContent;
 contenedor = null;
 return texto;
}

var content = [
   "<a>1<b>2</b></a>", // 12
   "<a>1<b>2</b></a> 3 </c>", // 12 3
   "<a-1>1<b>2</b></a1> 3 </c>", // 12 3
   "<a-1>1<b>2</b></a1> 3 <d-2-0> hello </d-2-0>  </c>", // 12 3 hello  
   "<a-1>1<b>2</b></a1> 3 <d-2-0> hello </d-2-0> < </c>", // 12 3 hello < 
   `  Mi contenido
  <br>
  <p foo="bar"> más contenido </p>
  <p data-otro-atributo="foo" >aquí (  ) van dos espacios</p>`
];

 
content.forEach(s => console.log(extraerTexto(s)))

9
  • gracias por responder Angel.. el problema es que esta regex para tags de tipo: "<a href='\#'>" o "<img src='\home.jpg'/>" esta dejando de hacer match pero veo funciona mejor que la mia
    – RazerJs
    Commented el 6 dic. 2019 a las 15:38
  • @RazerJs ahora vero el problema con los atributos. Una idea es usar la api del navegador. 1 - Crear un nuevo elemento en memoria document.createElement('div') 2 - Añades el contentido con innerHTML. 3 - Lees el innerText de este elemento. Commented el 6 dic. 2019 a las 16:22
  • Saludos Angel el problema es que recibo como parámetro esta cadena.. no precisamente un tag con sus atributos e hijos.. por eso el utilizar una regex
    – RazerJs
    Commented el 7 dic. 2019 a las 12:40
  • @RazerJs creo que no pillastes la idea (agrego otro ejemplo), seria totalmente valido pasar este contenido a un nuevo elemento en memoria y obtener textContent Commented el 7 dic. 2019 a las 13:24
  • 1
    @RazerJs si , ya veo, tampoco funcionaría en el caso de que los atributos contengan como valor caracteres escapados que confundan a la regEx, tales como <a b="\" \\ >" >link</a>. Como dije antes, siempre que sea posible usar la API del navegador nos ahorraremos tener que cubrir estos casos. Pero me alegro que te sirva para ayudarte a buscar una regExp que cubra tu necesidades :) Commented el 7 dic. 2019 a las 16:39

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.