如何使用正則表達式更改文本中的單詞顏色-Javascript

Question

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

但是對我沒用

Answer 1

你是這個意思嗎：

更換

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