3

Tengo un string como este:

Bg:red; Top:Bottom:Left:0px; Pos:absolute

Hay pares de claves y valores separados por un punto y coma y un espacio '; '. Lo que pretendo es reutilizar el mismo valor para diferentes claves como en este fragmento:

Top:Bottom:Left:0px

Dando como resultado lo siguiente:

Top:0px; Bottom:0px; Left:0px

El siguiente código javascript funciona a la perfección:

let CadenaOriginal = 'Bg:red; Top:Bottom:Left:0px; Pos:absolute'
let Resultado = []
for (let Fragmento of CadenaOriginal.split ('; ')) {
    if (Fragmento.match (/:/g).length === 1) { //En caso de que los dos puntos se repitan una sola vez
        Resultado.push (Fragmento)
        continue
    }
     //En caso de que los dos puntos se repitan más de una vez
    Fragmento = Fragmento.split (':')
    let UltimoValor = Fragmento.pop ()
    for (let F of Fragmento) Resultado.push (`${ F }:${ UltimoValor }`)
}
CadenaOriginal = Resultado.join ('; ')
console.log (CadenaOriginal)

Mi pregunta es: ¿se pudiera hacer esto mismo en una única línea con String.replace mediante una expresión regular?

6
  • ¿Que has intentado? Commented el 28 dic. 2022 a las 19:10
  • Lo que he intentado hacer, que de hecho me funciona, es obtener el resultado mediante ciclos for, whiles, manejos de indices, etc. Quiero hacer lo mismo pero con regex.
    – user316201
    Commented el 28 dic. 2022 a las 19:13
  • En este caso no veo necesario especificar un ejemplo mínimo verificable ya que la metodología que uso actualmente (fors, indices, whiles), es totalmente diferente al uso de String.replace con regex.
    – user316201
    Commented el 28 dic. 2022 a las 19:19
  • Hola! Bienvenidx a SOes. Las preguntas del tipo "Tengo que hacer esto" sin mostrar el código que has escrito no suelen ser bien recibidas, ya que la respuesta será siempre adivinando y no encaja en el formato del sitio. Recomiendo que hagas el recorrido para entender el sitio y de paso ganar tu primera medalla. También estaría bien que revisaras Cómo preguntar para que recibas respuesta cuanto antes.
    – Alfabravo
    Commented el 28 dic. 2022 a las 19:21
  • Recuerda que puedes editar tu pregunta cuantas veces sea necesario (incluso si termina cerrada) y añadir la info relevante a forma de Ejemplo mínimo (en los comentarios no se ve bien el código y abajo sólo van nuestros intentos de respuesta).
    – Alfabravo
    Commented el 28 dic. 2022 a las 19:22

3 respuestas 3

1

¿Cómo convertir cualquier A:B:..N:X; en A:X; B:X; ..N:X;?

Esta es la respuesta:

/((?:[^;]*;)*?[^:;]+:)(?=(?:[^:;]+:)+([^:;]+)(?:;|$))/gy

Reemplazando por:

$1$2; 

La idea es coincidir únicamente con las claves que tengan otras claves antes del valor. Si hay 3 claves y luego el valor, coincidir sólo con las primeras 2.

Para que el regex no empiece a coincidir desde cualquier lugar del texto, lo vamos a anclar con el modificador /y (sticky), que obliga al regex a coincidir desde el principio del texto o desde el final de la última coincidencia que se obtuvo.

Pero al estar anclado, al principio de la expresión vamos a tener que consumir toda clave o valor que no cumpla con lo que queremos que coincida. Es decir, que nos permita avanzar en el texto hasta el inicio de lo que puede ser una coincidencia, hasta la posición después de un ;:

(?:[^;]*;)*?

Parados en esa posición, queremos que coincida con una clave:

[^:;]+:

Y ahora viene lo más importante para entender en este caso: queremos que vaya hacia adelante, pase por al menos otra clave, coincida con el valor, pero que después el cursor de la posición actual vuelva a donde estábamos, al final de la clave a la que le queremos agregar este valor. Justamente eso es lo que hace un lookahead (?=regex).

Dentro del lookahead, le exigimos que coincida con al menos otra clave (?:[^:;]+:)+ y luego que capture en nuestro 2do grupo de paréntesis al valor ([^:;]+) seguido de un punto y coma o el final del texto (?:;|$).

const regex = /((?:[^;]*;)*?[^:;]+:)(?=(?:[^:;]+:)+([^:;]+)(?:;|$))/gy;
const reempl = `$1$2; `;

const texto = `Bg:red; Top:Bottom:Left:0px; Pos:absolute`;
   
const rta = texto.replace(regex, reempl);

console.log(rta);

2
  • Funciona perfecto. Gracias. Pero tengo una duda. Una regex tan compleja como esa no sería una carga para el sistema, considerando que ejecutar esta regex forma parte de una función que se encarga de generar elementos del DOM dinámicamente, o sea, la función que más veces se ejecuta en mi código. Por ejemplo: para generar una ventana modal compleja uso más de 30 elementos.
    – user316201
    Commented el 16 ene. 2023 a las 2:43
  • 1) No es tan complicada. Es bastante lineal. 2) Probalo, medí cuánto tiempo tarda en ejecutar con y sin este código. 3) Esto último no era parte de la pregunta y honestamente no me dan muchas ganas de defender un código después de responderlo. Podés perfectamente hacer una nueva pregunta preguntando por eficiencia/tiempos que el que tenga ganas responda
    – Pollo
    Commented el 18 ene. 2023 a las 0:42
0

Puedes usar esta expressión regular: ^(.*)(T:)(B:)(L:)(.*;)(.*)$ y reemplazarlo por $1$2$5 $3$5 $4$5$6
Como funciona:
^ y $ marcan inicio y final de la frase
Las partes entre paréntesis, serán "guardadas" para el reemplazo, aparecen como $1, $2...
La expressión se podria leer como "Cualquier texto inicial ($1) seguido de T:($2) B:($3) L:($4), unos caracteres seguidos de un ; ($5) y un texto final ($6), lo recolocas en este orden: $1$2$5 $3$5 $4$5$6.

Código de ejemplo:

console.log("Pos:absolute; T:0px; B:0px; L:0px; Bg:red;".replace(/^(.*)(T:)(B:)(L:)(.*;)(.*)$/g, "$1$2$5 $3$5 $4$5$6"))

0

Con expresión regular sería algo como:

const cadena = 'Bg:red; Top:Bottom:Left:0px; Pos:absolute;';
const value1 = cadena.match(/Top:Bottom:Left:(\S+)/)[1]; // hago match para encontrar al texto que está al lado de "Top:Bottom:Left:" en la cadena => "0px;".
const value2 = cadena.match(/Top:Bottom:Left:(\S+)/)[0]; // hago match para encontrar a "Top:Bottom:Left:0px;" en la cadena.
const result = cadena.replace(value2, `Top:${value1} Bottom:${value1} Left:${value1}`); // en el string busco a "value2" ("Top:Bottom:Left:0px;") y lo reemplazo por "Top:0px; Bottom:0px; Left:0px;", en donde los "0px;" es el "value1".
console.log(result);

3
  • Gracias, pero debo aclarar algo: ¿Qué ocurrirá con otras cadenas como por ejemplo 'Bg:FontColor:BorderColor:blue' o 'A:B:C:D:E:F:G:H:Valor'?
    – user316201
    Commented el 28 dic. 2022 a las 20:46
  • Recuerda: es una enorme cadena con varios puntos y coma. Entre cada punto y coma hay pares de claves y valores separados por dos puntos. Si hay solo una clave con su valor, se ignora. Si hay muchas claves y un valor al final, debe obtenerse Clave1:Valor; Clave2:Valor, etc.
    – user316201
    Commented el 28 dic. 2022 a las 20:51
  • Ademas no es lógico que hiciera eso solo para un único ejemplo. Si fuera un unico ejemplo escribiría directamente el resultado en lugar de obtenerlo a partir de otra cadena
    – user316201
    Commented el 28 dic. 2022 a las 20:58

Tu Respuesta

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