0

tengo un texto al que le estoy añadiendo el ID del widget de un CSS automáticamente en cada punto, el problema es que tengo un valor que contiente un punto, por ejemplo

width: 8.5%;

y quiero obviamente añadir números como excepción para que no se añada el ID del widget, o en todo caso y si es que fuera posible que ningún valor del CSS se vea afectado, es decir nada dentro de las llaves { }

ejemplo del valor afectado:

function myFunction() {
  var widgetId = "service"
  var str = document.getElementById("demo").innerHTML; 
  var res = str.replaceAll(".", `#${widgetId}.`);
  document.getElementById("demo").innerHTML = res;
}
    <p id="demo">
        <code>
        .spacer-line {
        border-bottom-width: 20px;
        width: 8.5%;
        border-color: black;
    }
    .card-title {
        color: blue !important;
    }
    .card-body {
       text-align: left;
       padding: 80px 20px 60px 90px;
    }
  </code>
 </p>
    <button onclick="myFunction()">Reemplazar</button>

estoy haciendo un value = value.replaceAll('.', '#' + widgetId + ' .');

2 respuestas 2

2

Lo más recomendable sería hacerlo con una expresión regular como /^(\s)*(\.)/gm

  • ^ - Comenzar a buscar desde el inicio de cada línea
  • (\s)* - Cero o más caracteres de espacio, incluyendo saltos de línea
  • (\.) - Buscar un punto, debe escaparse, porque de lo contrario es cualquier caracter excepto salto de línea
  • gm - Son directivas, donde la g especifica que se busque globalmente (en toda la cadena) con lo que se puede usar .replace() en vez de .replaceAll(); la directiva m especifica que se trata de un texto multilínea

Nota: Cambié el ID del párrafo a la etiqueta <code> y agregué una etiqueta <pre> para mantener el formato.

let str = document.querySelector("#demo").innerHTML;

function myFunction() {
    let widgetId = "service"
    // Comentado para trabajar solo sobre la cadena original
    // let str = document.querySelector("#demo").innerHTML;
    let res = str.replace(/^(\s)*(\.)/gm, `#${widgetId} .`);
    document.querySelector("#demo").innerHTML = res;
}

function reset() {
    document.querySelector("#demo").innerHTML = str;
}
<p>
<pre><code id="demo">     .spacer-line { /* Lo moví al inicio de la cadena */
        border-bottom-width: 20px;
        width: 8.5%;
        border-color: black;
    }
.card-title { /* Lo moví al incio de la línea */
        color: blue !important;
    }
    .card-title .card-body {
       text-align: left;
       padding: 80px 20px 60px 90px;
    }
    div.este-no-cambia { /* No hay espacio antes del punto, no se remplaza */
        width: 25.5%;
    }
</code></pre>
</p>
    <button onclick="myFunction()">Reemplazar</button>
    <button onclick="reset()">Restablecer</button>

Si quieres saber más acerca de expresiones regulares, realiza tus pruebas en: https://regexr.com/

6
  • gracias amigo, ahora tengo una pregunta, cómo podría hacer que el widgetId sea solamente añadido en cada salto de linea? me explico porque si hay un .card-body .card-text se añade 2 veces la etiqueta, cosa que no se quiere
    – Andre
    Commented el 17 may. 2021 a las 13:23
  • he intentando con (/^(\.)|(\n\.)/gm, ` #${widgetId} .`) pero no me funciona así
    – Andre
    Commented el 17 may. 2021 a las 13:50
  • 1
    @AndréCuellarAvaroma, tu intento iba bien, solo faltaba \s+ después del salto de línea. Actualicé la respuesta.
    – Triby
    Commented el 17 may. 2021 a las 15:04
  • gracias! una última duda, yo molestando lo siento jaja. dices que \s+ busca uno o más espacios, sin embargo si a la primera línea de tu ejemplo pongo varios espacios no añade el widgetID, qué puede ser?
    – Andre
    Commented el 18 may. 2021 a las 12:44
  • @AndréCuellarAvaroma, al final quedó con una sola expresión regular, aprovechando que \s representa espacios y saltos de línea.
    – Triby
    Commented el 18 may. 2021 a las 14:23
1

Puedes intentar utilizando string literals en vez de contatenar con "+" por ejemplo:

str.replaceAll(".", `#${widgetId}.`);

Con eso literalmente no importa lo que tengas dentro de las `` te va a respetar el orden y los espacios

1
  • hola, gracias por tu respuesta, pero acabo de probar así y sigue ocurriendo, actualicé mi pregunta con tu respuesta y como podrás ver, los valores dentro de las llaves {} siguen siendo afectados, como el número de ejemplo
    – Andre
    Commented el 14 may. 2021 a las 2:03

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.