uniapp指定字符串中文字颜色(包含js方式)

英乐

关注

阅读 122

2022-02-26

目录


需求

本文使用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.效果

在这里插入图片描述

二、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.效果

在这里插入图片描述


总结

如果错误欢迎指正

精彩评论(0)

0 0 举报