2

A través de un textarea estoy capturando lo que ingresa el usuario. Mi objetivo es capturar del textarea, todo aquello que se encuentre entre comillas dobles, o comillas simples.
Nota: Se asume que no hay saltos de linea si no se han cerrado las comillas.

Por ejemplo, si el textarea contiene lo siguiente:

aaa 'bbb' ccc "ddd"

Entonces el regex debe capturar

bbb
ddd

El regex que estoy usando:

/((\".*?\")|(\'.*?\'))/g

Funciona bien para el caso expuesto, sin embargo me arroja un error en consola Unterminated group cuando el textarea contiene lo siguiente:

aaa 'rgba(255,255,255,'

Lo que necesito es que toda cadena sin importar lo que contenga sea capturada tal y como se capturaron las cadenas del primer ejemplo.

3
  • No sé a qué se debe el error que comentás, probablemente a algo del resto del código, ya que la expresión regular funciona bien, sólo que captura las comillas también. -Y la expresión es lo mismo que /".*?"|'.*?'/g
    – Mariano
    Commented el 15 oct. 2016 a las 21:16
  • @Mariano Tienes razón. El origen del error sucede cuando obtengo lo que se encuentra entre las comillas, y eso lo ingreso como parámetro en la creación de un objeto Regex. var interiorcomillas = grupo[2]; var re = new RegExp(interiorcomillas); Es alli cuando me ocurre el error. Commented el 16 oct. 2016 a las 1:45
  • Para generar un regex a partir de un string, hay que escapar los caracteres especiales, como var re = new RegExp(interiorcomillas.replace(/[\/\\^$*+?.()|[\]{}]/g, '\\$&'))... pero realmente me pregunto si sería la mejor opción (depende del caso).
    – Mariano
    Commented el 16 oct. 2016 a las 1:48

3 respuestas 3

5

Tres formas de capturar el texto entre comillas (simples o dobles)

1. Simple

Para obtener el texto entre comillas simples o dobles, usamos 2 grupos. Luego de la coincidencia, sólo uno de estos 2 grupos tendrá el texto buscado, y usaremos sólo ese valor. Así, se obtiene sólo el texto entre comillas (sin incluir las comillas).

/"([^"]*)"|'([^']*)'/g

function obtenerTextoEnComillas() {
    const regex = /"([^"]*)"|'([^']*)'/g,
    	  texto = document.getElementById("ingreso").value;
    var   grupo,
          resultado = [];
    
    while ((grupo = regex.exec(texto)) !== null) {
        //si coincide con comillas dobles, el contenido estará en el
        //   grupo[1], con el grupo[2] undefined, y viceversa
        resultado.push(grupo[1] || grupo[2]);
    }
    
    //resultado es un array con todas las coincidencias
    // mostramos los valores separados con saltos de línea
    document.getElementById("resultado").innerText = resultado.join("\n");
}
<textarea id="ingreso" style="width:100%" rows="4">
aaa 'bbb' ccc "ddd"a
aaa 'rgba(255,255,255,'
</textarea>
<input type="button" value="Obtener texto entre comillas" onclick="obtenerTextoEnComillas()">
<pre id="resultado"></pre>



2. Todo en uno

Podemos obtener el texto buscado siempre dentro del mismo grupo (grupo[2]).
Al final de la expresión, usamos \1, que es una retroreferencia al grupo 1 (o backreference), para garantizar que termine con el mismo caracter que se capturó al principio (las comillas usadas para abrir).

/(["'])(.*?)\1/g

function obtenerTextoEnComillas() {
    const regex = /(["'])(.*?)\1/g,
    	  texto = document.getElementById("ingreso").value;
    var   grupo,
          resultado = [];
    
    while ((grupo = regex.exec(texto)) !== null) {
        //el grupo 1 contiene las comillas utilizadas
        //el grupo 2 es el texto dentro de éstas
        resultado.push(grupo[2]);
    }
    
    //resultado es un array con todas las coincidencias
    // mostramos los valores separados con saltos de línea
    document.getElementById("resultado").innerText = resultado.join("\n");
}
Texto:
<textarea id="ingreso" style="width:100%" rows="4">
aaa 'rgba(255,255,255,'
"texto con comillas 'simples' incluidas" ... 'y "viceversa"'
</textarea>
<input type="button" value="Obtener texto entre comillas" onclick="obtenerTextoEnComillas()">
<pre id="resultado"></pre>


O, permitiendo saltos de línea entre las comillas, reemplazando el punto por [\s\S]:

/(["'])([\s\S]*?)\1/g

function obtenerTextoEnComillas() {
    const regex = /(["'])([\s\S]*?)\1/g,
    	  texto = document.getElementById("ingreso").value;
    var   grupo,
          resultado = [];
    
    while ((grupo = regex.exec(texto)) !== null) {
        //el grupo 1 contiene las comillas utilizadas
        //el grupo 2 es el texto dentro de éstas
        resultado.push(grupo[2]);
    }
    
    //resultado es un array con todas las coincidencias
    // mostramos los valores separados con saltos de línea
    document.getElementById("resultado").innerText = resultado.join("\n\n");
}
Texto:
<textarea id="ingreso" style="width:100%" rows="4">
aaa 'rgba(255,
255,255,'
"texto con comillas 'simples' incluidas" ... 'y "viceversa"'
</textarea>
<input type="button" value="Obtener texto entre comillas" onclick="obtenerTextoEnComillas()">
<pre id="resultado"></pre>


Asimismo, muchas veces se quiere implementar estructuras más elaboradas que .*? dentro de las comillas. Esta expresión es apenas menos eficiente que la anterior, pero muchas veces más eficaz con estructuras más complejas (como el regex que se verá luego).

/(["'])([^"']*(?:(?!\1)["'][^"']*)*)\1/g
  • Definimos el primer grupo para que coincida con cualquiera de los dos tipos de comillas (["'])
  • Al final de la expresión, usamos \1, como retroreferencia al grupo 1 (las comillas usadas para abrir).
  • En el medio, el grupo 2 ([^"']*(?:(?!\1)["'][^"']*)*), que contendrá el texto buscado. Coincide con:

    • cualquier texto sin ninguno de los dos tipos de comillas [^"']*, seguido (opcionalmente) de
    • las comillas no capturadas en el grupo 1 (?!\1)["'], seguidas de más texto permitido [^"']*
      (?!..) es una previsión negativa (o negative lookahead).


    *En esta estructura usamos una técnica conocida como Unrolling The Loop, que sigue el formato normal* (?: especial normal* )*.



3. "Con \"escapes\""

También podemos considerar las comillas escapadas con una barra \" como válidas (al igual que la mayoría de los lenguajes).
En este caso, usamos el modificador /y (sticky), que obliga a que la coincidencia empiece al inicio del texto o al final de la última coincidencia, y así garantizar que las comillas estén balanceadas. *ver compatibilidad

/[^'"\\]*(?:\\.[^'"\\]*)*(["'])([^"'\\]*(?:(?:(?!\1)["']|\\.)[^"'\\]*)*)\1/gy


Descripción:

/
[^'"\\]*                    # Texto antes de las comillas
(?:                         # Grupo sin capturar
    \\.[^'"\\]*             #   Un \escape y más texto
)*                          # repetido 0 o más veces
(["'])                      # Comilla inicial (grupo 1)
(                           # Grupo 2: texto entre comillas
    [^"'\\]*                #   Caracteres que no son comillas ni \
    (?:                     #   Grupo sin capturar
        (?:(?!\1)["']|\\.)  #     Comillas que no son las usadas o un \escape
        [^"'\\]*            #     Seguido de más caracteres permitidos
    )*                      #   repetido 0 o más veces (unrolling the loop)
)                           # fin del grupo 2
\1                          # Cierre de comillas (\1 es el texto capturado en el grupo 1)
/gy                         # Modos: g (todas las coincidencias) y (sticky, anclado)


Código:

function obtenerTextoEnComillas() {
    const regex = /[^'"\\]*(?:\\.[^'"\\]*)*(["'])([^"'\\]*(?:(?:(?!\1)["']|\\.)[^"'\\]*)*)\1/gy,
    	  texto = document.getElementById("ingreso").value;
    var   grupo,
          resultado = [];
    
    while ((grupo = regex.exec(texto)) !== null) {
        //el grupo 1 contiene las comillas utilizadas
        //el grupo 2 es el texto dentro de éstas
        resultado.push(grupo[2]);
    }
    
    //resultado es un array con todas las coincidencias
    // mostramos los valores separados con saltos de línea
    document.getElementById("resultado").innerText = resultado.join("\n");
}
Texto:
<textarea id="ingreso" style="width:100%" rows="4">
aaa 'bbb' ccc "ddd"a
aaa 'rgba(255,255,255,'
acá "se \"permiten\" 'comillas' con escapes"
</textarea>
<input type="button" value="Obtener texto entre comillas" onclick="obtenerTextoEnComillas()">
<pre id="resultado"></pre>

1
  • Hola, he estado intentando volver a combinar el texto extraído y lo que no estaba entre comillas pero no me ha funcionado. ya que lo extraído lo quiero meter entre etiquetas <sub></sub> Commented el 24 oct. 2019 a las 20:15
0

Prueba hacerlo así:

var str = 'aaa \'bbb\' ccc "ddd" aaa \'b"bb\' ccc "d\'dd"',
  re = /"[^"]*"|'[^']*'/,
  match;
while (match = re.exec(str)) {
  console.log(match[0]);
  str = str.replace(match[0], '');
}

Salida en consola:

'bbb'
"ddd"
'b"bb'
"d'dd"
-1
(?:'|")(.+)(?:'|")

Este te capturara si existe algun contenido interno entre comillas simples o dobles

https://regex101.com/r/ZOLlyd/1

puedes probarlo aqui con todos tus casos

2
  • 1
    Esto tiene 3 problemas: 1. Estás repitiendo \., es decir puntos literales. 2. Al usar el cuantificador .+ coincide con cuantos más caracteres se pueda coincidir (ejemplo). y 3. La estructura (?:'|") es altamente ineficiente, y se debería evitar en favor de ["'].
    – Mariano
    Commented el 15 oct. 2016 a las 21:24
  • Correcto! lo que no entiendo es como se me colo ese \. Commented el 16 oct. 2016 a las 10:30

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.