export function numberToColor(text, color = '#635BFF', size = '12px') {

  let reg = /(\d+)/g;

  return text.replace(reg, `<span style="color: ${color};size: ${size}">$1</span>`);

}

效果：

React.js 修改文本中数字样式的更多相关文章

  1. JS修改标签中的文本且不影响其中标签

    /********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * ...

  2. 【百度地图API1.1】修改文本标注的样式

    原文:[百度地图API1.1]修改文本标注的样式 百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080&quo ...

  3. JS实现文本中查找并替换字符

    JS实现文本中查找并替换字符 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html> <head> <style type=" ...

  4. js修改html中class属性

    document.getElementById("tr").setAttribute("class","styleclass"); 其中  ...

  5. react之四种组件中DOM样式设置方式

    1.行内样式 想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现 行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方 例如:render函数里.组件原型上.外链js文件 ...

  6. js验证文本框数字

    输入框 <input name="title" type="text" oninput="onlyNum(this,'')" titl ...

  7. js修改文档的样式

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Java ...

  8. js 修改字符串中某些字符的样式

    var str = 'abcdefghijklmnobqrstuvwxyz'; function HightLight(e){ var reg = new RegExp(e, 'g') str = s ...

  9. 在react.js上使用antd-design没有样式

    两种解决方法: 第一种: 在.babelrc中加入 { "presets": ["es2015", "react"], "plug ...

  10. config.js配置页面中的样式和图片路径

    这个文章用在什么地方,我先说一下,上周啊,我接到一个任务.因为公司业务要对接不同的银行,例如在工行下颜色是红色的,在其他银行下默认为蓝色,所以在页面一致的情况下,保证页面中的按钮和ICON是可以配置的 ...

随机推荐

  1. Array.from() ------来自❀ 前端宇宙 ❀公众号。

    JavaScript 中有一个这样的函数: Array.from:允许在 JavaScript 集合(如: 数组.类数组对象.或者是字符串.map .set 等可迭代对象) 上进行有用的转换. 1. ...

  2. WordPress4.6任意命令执行漏洞

    前言 WordPress 是一种使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设属于自己的网站.也算是一个内容管理系统(CMS) 环境搭建 docker环 ...

  3. ADC-CH32FV2x_V3x 框图功能详解

    主要特性(CH32FV2x_V3x) 系列:l 12 位分辨率l 支持 16 个外部通道和 2 个内部信号源采样l 多通道的多种采样转换方式:单次.连续.扫描.触发.间断等l 数据对齐模式:左对齐.右 ...

  4. C-04\IDE基础知识和分支，循环语句

    一.浮点数特性及比较方法 浮点数在多参数传参的时候默认是会进行精度转换,由float转换到double,浮点数是一个近视值,不能进行直接等于比较,一般可以用区间法比较但是会存在精度丢失的问题. 浮点数 ...

  5. 一款备受欢迎的用户脚本管理器插件TampermonKey-油猴脚本管理器安装与使用

    Tampermonkey简介 Tampermonkey是一款备受欢迎的浏览器扩展和用户脚本管理器,它适用于目前各种主流浏览器. 方便的脚本管理(正在运行的脚本和可以运行的脚本在图标处显示一览无余) 脚 ...

  6. day14-异常处理

    异常处理 1.基本介绍 SpringMVC 通过 HandlerExceptionResolver 处理程序的异常,包括 Handler映射.数据绑定以及目标方法执行时发生的异常 有两种方案来进行异常 ...

  7. 跳板攻击之：MSF portfwd 端口转发与端口映射

    跳板攻击之:MSF portfwd 端口转发与端口映射 郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关 ...

  8. 解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details

    解决办法: 网上说遇到这种问题可能是npm需要升级,有些下载不下来, 这样就好使用: 1.删除已经安装的:node_modules 和 package-lock.json 2.在安装:npm inst ...

  9. input type = file 在部分安卓手机上无法调起相册

    移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是: 加上 accept = "image/*&qu ...

  10. postgresql索引使用情况及坏索引处理

    1.postgresql中索引系统视图pg_stat_user_indexes TEST=# \d+ sys_stat_user_indexes View "SYS_CATALOG.sys_ ...