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>
/".*?"|'.*?'/g
var re = new RegExp(interiorcomillas.replace(/[\/\\^$*+?.()|[\]{}]/g, '\\$&'))
... pero realmente me pregunto si sería la mejor opción (depende del caso).