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. 流程概述与顺序结构-选择结构_单if语句

    流程概述与顺序结构 概述 在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.也就是说,程序的流程对运行结果 有直接的影响.所以,我们必须清楚每条语句的执行流程.而且,很多时候我们要 ...

  2. 使用VMware Converter Standalone P2V（物理机转换虚拟机）

    使用VMware Converter Standalone P2V(物理机转换虚拟机) 环境说明: 1.P2V软件:VMware-converter-en-6.3.0-20575345  下载地址:v ...

  3. 线程基础知识14 ReentrantLock和ReentrantReadWriteLock

    1 简介 ReentrantLock和ReentrantReadWriteLock都是可重入锁.可重入锁,顾名思义,就是支持重进入的锁,它表示该锁能够支持一个线程对资源的重复加锁 ReentrantL ...

  4. zookeeper06-watcher四字命令

    zookeeper四字监控命令​  zooKeeper支持某些特定的四字命令与其的交互.它们大多是查询命令,用来获取 zooKeeper服务的当前状态及相关信息.用户在客户端可以通过 telnet 或 ...

  5. Zookeeper+SpringCloud微服务（入门二）

    1.Zookeeper注册中心 1.服务提供者Provider 新建cloud-provider-zk-payment-8004 pom.xml: <dependencies> <d ...

  6. Eureka 注册中心和服务提供者

    什么是Eureka组件 spring cloud Eureka ,提供服务注册和服务发现的功能. 一:spring cloud Eureka Eureka Server 服务端 Eureka Clie ...

  7. python3 os.getcwd()和os.path.realpath()区别

    在写一个android手机的自动化测试,用appium+python3,跟室友讨论拟定了一个框架,在写2个通用的简单模块时,遇到问题. 同一个目录下2个模块,driver.py(用于获取app 句柄) ...

  8. 软件教程 | Jupyter&stata之stata_kernel攻略

    ![](http://mdimg.yxj1010.top/xlbxs_ydt2.png) 目录: 目录 一.什么是stata_kernel 1. stata_kernel简介 2. 为什么要使用sta ...

  9. CF796C Bank Hacking

    题目传送门 思路 放眼整个题解区没有我这种解法,因此来写一篇题解. 既然要求我们选择一个节点作为根,那么我们就枚举根. 接下来的问题就是如何 \(\mathcal{O}(1)\) 或 \(\mathc ...

  10. [EULAR文摘] 新证据: NSAID对AS放射学进展的影响

    新证据: NSAID对AS放射学进展的影响 Sieper J, et al. EULAR 2015. Present ID: OP0145. 背景: 既往有研究显示持续给予NSAID相较于按需给药能在 ...