时间戳

首页 > 解决方案 > 如何使用正则表达式更改文本中的单词颜色 - Javascript

javascript - 如何使用正则表达式更改文本中的单词颜色 - Javascript

问题描述

我正在研究 JavaScript 正则表达式，我想改变单词的颜色，

Socket:, Database:,Scrapper:只有。

如何使用 JavaScript Regex 实现这一点？

这是我的文字：

Socket : Sockets Connection Made on ID : dBGWu_Y4nSI40QEPAAAB
Database : Connected to MYSQL Database Successfully...
Scrapper : Scrapper Initiated, Please wait while we load the URL...
Scrapper : The Page ""+MAIN_URL+"" loaded Successfully !
Scrapper : The Page SNAPSHOP has been taken !
Scrapper : Total jobs Found on this site : 1093 and Total Pages : 110
Scrapper : The Page Current Jobs are evaluating ...
Scrapper : Next Page Click, Please wait ...
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !
Scrapper : The Page Current Jobs are evaluating ...
Scrapper : Next Page Click, Please wait ...
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !
Scrapper : The Page Current Jobs are evaluating ...
Scrapper : Next Page Click, Please wait ...
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !
Scrapper : --------------------------------ALL PAGES ARE SCRAPPED SUCCESSFULLY---------------------------

它基本上是ul > li元素，我想在其中更改一些单词的颜色。

我试过这个：

$(".log-container").text().match(/(scrapper :)/gi)[0].css({color:"orange"});

但对我不起作用

标签： javascriptregex

解决方案

你是这个意思吗：

代替

(Socket|Database|Scrapper)(\s*:)

和

<span style="color:blue">$1</span>$2

将在跨度设置颜色为蓝色的单词中换行。 

text = document.body.innerHTML.replace(/(Socket|Database|Scrapper)(\s*:)/gi, '<span style="color:blue">$1</span>$2');
  
console.log( text );
document.body.innerHTML = text;
Socket : Sockets Connection Made on ID : dBGWu_Y4nSI40QEPAAAB<br/>
Database : Connected to MYSQL Database Successfully...<br/>
Scrapper : Scrapper Initiated, Please wait while we load the URL...<br/>
Scrapper : The Page ""+MAIN_URL+"" loaded Successfully !<br/>
Scrapper : The Page SNAPSHOP has been taken !<br/>
Scrapper : Total jobs Found on this site : 1093 and Total Pages : 110<br/>
Scrapper : The Page Current Jobs are evaluating ...<br/>
Scrapper : Next Page Click, Please wait ...<br/>
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !<br/>
Scrapper : The Page Current Jobs are evaluating ...<br/>
Scrapper : Next Page Click, Please wait ...<br/>
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !<br/>
Scrapper : The Page Current Jobs are evaluating ...<br/>
Scrapper : Next Page Click, Please wait ...<br/>
Scrapper : Next Page is Loaded, and SNAPSHOT has been taken !<br/>
Scrapper : --------------------------------ALL PAGES ARE SCRAPPED SUCCESSFULLY---------------------------<br/>

推荐阅读