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

时间:2018-08-10 10:15:23

标签: javascript regex

我正在研究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"});

但是对我没用

1 个答案:

答案 0 :(得分:0)

这是您的意思吗?

替换

(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/>