0
点赞
收藏
分享

微信扫一扫

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

英乐 2022-02-26 阅读 122

目录


需求

本文使用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 条评论