Javascript多重替换为避免html标记的正则表达式

所以我有一个java脚本，可以找到元音并将其大写。我想做的是创建一个名为bigBlue的id，它将大写的值更改为具有特定css属性的蓝色字符

var strMessage1 = Emphathy;
var startDiv = '<div id="bigBlue">';
var endDiv = '</div>';
var newRoot = strMessage1
.replace(/a/g, startDiv+'A'+endDiv)
.replace(/e/g, startDiv+'E'+endDiv)
.replace(/i/g, startDiv+'I'+endDiv)
.replace(/o/g, startDiv+'O'+endDiv)
.replace(/u/g, startDiv+'U'+endDiv)
$("#test").append(newRoot);

var strMessage1=emphanthy；
var startDiv=“”；
var endDiv=''；
var newRoot=strMessage1
.更换（/a/g，startDiv+a'+endDiv）
.更换（/e/g，startDiv+'e'+endDiv）
.更换（/i/g，startDiv+i'+endDiv）
.更换（/o/g，startDiv+'o'+endDiv）
.更换（/u/g，startDiv+u+endDiv）
$（“#测试”）.append（newRoot）；

下面是结果的示例

我的输出几乎是断断续续的胡言乱语。我想的是.replace也在替换startDiv和endDiv的属性

---

如何避免替换startDiv和endDiv值，同时用大写元音替换元音，包括在蓝色大div中？

尝试使用函数替换类似的直接符号

var newRoot = strMessage1.replace(/[aeiou]/g, function(sym){return startDiv+sym.toUpperCase()+endDiv});

抽样

---

如果您希望字符在一行上-使用

而不是

您可以提供样本输入和样本输出吗？可能要确保已经添加了jsFiddle，并删除了jsFiddle中CSS周围的标记，使它们变成蓝色；）正是我需要的！谢谢@Grundy！