如果您想知道如何使用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>

是的，你可以这样做。你可以简单地循环你的内容，并添加一个条件，即一个单词中的所有字母都应该有适当的大写字母ascii值，如果它通过了这个检查，你可以在一个span标签中指定颜色。

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;

个字符

我不使用Vue，但你可以简单地插入必要的<span>与内联样式一样;

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);