Cómo encontrar grupos de caracteres en mayúsculas y minúsculas en una cadena y reemplazarlos de esta manera:
<span class="upper_group">FOO</span><span class="lower_group">BAR</span>Intenté esto a continuación, pero no puedo transformar los grupos inferiores fácilmente a mayúsculas:
let sentence = "NOCH KEt SKUIZh"; let newSentence = sentence.replace(/([az]+)/g, '<span class="bar">$1</span>').replace(/([A-Z'.]+)/g, "<span class='foo'>$1</span>");Rendimiento esperado:
<span class="foo">NOCH</span> <span class="foo">KE</span><span class="bar">t</span> <span class="foo">SKUIZ</span><span class="bar">h</span>Puedes considerar este código:
var s = "NOCH KEt SKUIZh"; var r = s.replace(/([az]+)|([AZ]+)/g, (m, g1, g2) => '<span class="' + (g1 != undefined ? 'lower">' + g1 : 'upper">' + g2) + '</span>'); console.log(r); //=> '<span class="upper">NOCH</span> <span class="upper">KE</span><span class="lower">t</span> <span class="upper">SKUIZ</span><span class="lower">h</span>'Detalles RegEx+lamnda:
([az]+) : Coincide con 1+ letras minúsculas en el 1er grupo| : o([AZ]+) : Coincide con 1+ letras mayúsculas en el segundo grupo(m, g1, g2) : pone a disposición m (coincidencia completa) y gN (N-ésimo grupo de captura) para la expresión lambdag1 no es nulo, use la clase lower ; de lo contrario, use la clase upperLo siguiente asume que su resultado esperado realmente debería ser:
<span class="foo">NOCH</span> <span class="foo">KE</span><span class="bar">T</span> <span class="foo">SKUIZ</span><span class="bar">H</span>
Puede utilizar una función de reemplazo. Por ejemplo:
let sentence = "NOCH KEt SKUIZh"; let replacer = (_, g1, g2) => `<span class="${ g1 ? `foo">${g1}` : `bar">${g2.toUpperCase()}` }</span>`; let newSentence = sentence.replace(/([AZ]+)|([az]+)/g, replacer); console.log(newSentence); g1 es la cadena capturada por ([AZ]+) y g2 es la cadena capturada por ([az]+) .
let sentence = "NOCH KEt SKUIZh"; let newSentence = sentence.replace(/([az]+)|([A-Z'.]+)/g, (a,b) => b ? `<span class="adlavaret2">${a.toUpperCase()}</span>` : `<span class="adlavaret1">${a}</span>`); console.log(newSentence);