Intenté cambiar el color de fuente de mi String en mi aplicación vue según una condición. Sin embargo, las soluciones que encontré hasta ahora cambiaron el color de todo el texto. Solo quiero que se cambien partes específicas. Por ejemplo:
const exampleString= 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE'Las palabras en mayúsculas deben estar en color rojo pero el resto en negro. Entonces, una condición como "si tres caracteres posteriores son letras mayúsculas, entonces coloree rojo hasta que quede un espacio vacío". ¿Hay alguna manera de implementar esto?
Si pregunta cómo hacer eso con Vue, puede intentar con v-html :
new Vue({ el: "#demo", data() { return { text: "Yesterday I was ACTIVITY with FRIEND who I first met in PLACE" } }, computed: { setText() { return this.text.replace(/[AZ&]/g, m => `<span style="color: red;">${m}</span>`) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div v-html="setText"></div> </div>Sí, tú puedes hacerlo. Simplemente puede recorrer su contenido y agregar una condición de que todas las letras en una palabra deben tener el valor ascii apropiado para letras mayúsculas, y si pasa esta verificación, puede especificar el color en una etiqueta de span . Aquí hay un ejemplo de JavaScript puro:
var para = document.getElementById("para").innerHTML; var resultPara = ""; var words = para.split(" "); for (var word of words) { var capitalLetterCount = 0; for (var letter of word) { if (letter.charCodeAt(0) >= 65 && letter.charCodeAt(0) <= 90) capitalLetterCount++; else break; } if (capitalLetterCount != 0 && capitalLetterCount === word.length) resultPara += ' <span style="color: red">' + word + '</span>'; else resultPara += ' ' + word; } document.getElementById("para").innerHTML = resultPara; <div id="para">Yesterday I was ACTIVITY with FRIEND who I first met in PLACE</div>No uso Vue, pero simplemente puede insertar los <span> necesarios con un estilo en línea como;
var str = 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE', rgx = new RegExp("[AZ]{2,}","g"), res = str.replace(rgx, s => `<span style="color:red;">${s}</span>`); console.log(res);