JavaScript 部分文字的条件字体颜色更改

Question

我试图根据条件在我的 vue 应用程序中更改我的字符串的字体颜色。但是，到目前为止我找到的解决方案改变了整个文本的颜色。我只想更改特定部分。例如：

const exampleString= 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE'

大写字母的单词应为红色，其余为黑色。所以像“如果三个后续字符是大写字母而不是红色直到空space”这样的条件。有没有办法实现这个？

Answer 1

是的，你可以做到。您可以简单地遍历您的内容并添加一个条件，即单词中的所有字母都应该具有适当的大写字母 ascii 值，如果通过此检查，您可以在 [=13= 中指定颜色] 标签。这是一个纯粹的 JavaScript 示例：

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>

Answer 2

如果你问如何用 Vue 做到这一点，你可以试试 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(/[A-Z&]/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>

Answer 3

我不使用 Vue，但您可以简单地插入必要的 <span>s 和内联样式，例如；

var str = 'Yesterday I was ACTIVITY with FRIEND who I first met in PLACE',
    rgx = new RegExp("[A-Z]{2,}","g"),
    res = str.replace(rgx, s => `<span style="color:red;">${s}</span>`);

console.log(res);

JavaScript 部分文字的条件字体颜色更改

JavaScript conditional font color change of part of text

javascript

string

fonts

if-statement

vue.js