---

需求

本文使用js和uniapp两种方式实现，让指定字符串变色的需求

---

一、uniapp实现

1.html部分

代码如下（示例）：

<view v-html="msg1"></view>
<view v-html="msg2"></view>
<view v-html="msg3"></view>

2.vue部分

代码如下（示例）：

data () {
	return {
		msg1: `学海无涯<text style="color:#FF0000">一起</text>进步`,
		msg2: `学海无涯<text style="color:#7FFFD4">一起</text>进步`,
		msg3: `学海无涯<text style="color:#00EE00">一起</text>进步`
	}
},

3.效果

4.小程序

小程序这边以上方法并不适用，小程序可以使用截取字符串的方式或者，将已有数据直接渲染到所匹配的模板中。实现以上功能。

<view style="margin-top: 100rpx;" v-for="(item,index) in msgList" >
	学海无涯<text :style="{color: item.color}">{{item.msg}}</text>进步
</view>

data () {
	return {
		msgList: [{
			msg : '一起',
			color: '#FF0000'
		},{
			msg : '一起',
			color: '#7FFFD4'
		},{
			msg : '一起',
			color: '#00EE00'
		}],
	}
}

二、JavaScript实现

1.代码

<div class="d1"></div>

<script type="text/javascript" language="javascript">
    const reg = /(海)/g
    const str = "一入前端身深似海！！！";
    const newStrS = str.replace(reg, "<span style='color:#FF0000'>$1</span>");
    const d = document.getElementsByClassName('d1')[0]
    d.innerHTML = newStrS
</script>

2.效果

---

总结

如果错误欢迎指正