JS基于正則截取替換特定字符之間字符串操作示例
本文實(shí)例講述了JS基于正則截取替換特定字符之間字符串操作。分享給大家供大家參考,具體如下:
示例1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" language="javascript" > var html="ssssss @用戶名 和話題 #話題標(biāo)題# 用不同顏色高@假的亮 @用戶名2 和sss#此話題不對呀#ss"; var html1="ssssss @用戶名 和話題 #話題標(biāo)題# 用不同顏色高@假的亮 @用戶名2 和sss#此話題不對呀#ss"; var reg1=/( @[^ ]* )/g; var reg2=/( #[^#]*# )/g; var reg3=/(#[^#]*#)/g; document.write(html); document.write("<br/>"); html=html.replace(reg1,"<span style='color:red'>$1</span>"); html=html.replace(reg2,"<span style='color:green;'>$1</span>"); document.write(html); document.write("<br/>"); html1 = html1.replace(reg3,"<span style='color:blue;'>$1</span>"); document.write(html1); document.write("<br/>"); </script> </head> <body > </body> </html>
運(yùn)行截圖如下:
示例2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" language="javascript" > var a = "20141021123212"; var reg4 = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/; a = a.replace(reg4,"$1-$2-$3 $4:$5:$6"); document.write(a); document.write("<br/>"); </script> </head> <body > </body> </html>
運(yùn)行截圖如下:
示例3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <script type="text/javascript" language="javascript" > var c ="好啊 {話題標(biāo)題} 用不同顏色sss{此話題好}ss"; var reg5=/({[^{]*})/g; c = c.replace(reg5,"<span style='color:red'>$1</span>"); document.write(c); document.write("<br/>"); </script> </head> <body > </body> </html>
運(yùn)行截圖如下:
PS:這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用:
JavaScript正則表達(dá)式在線測試工具:
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具:
http://tools.jb51.net/regex/create_reg
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達(dá)式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前
本篇文章主要介紹了js模仿微信朋友圈計(jì)算時(shí)間顯示幾天/幾小時(shí)/幾分鐘/幾秒之前的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04JavaScript實(shí)現(xiàn)搜索框的自動(dòng)完成功能(一)
在很多需要搜索的網(wǎng)站, 都會(huì)有一個(gè)自動(dòng)完成的搜索框. 方便用戶查找他們想要的搜索詞. 幫助用戶快速找到自己想要的結(jié)果.接下來通過本文給大家介紹JavaScript實(shí)現(xiàn)搜索框的自動(dòng)完成功能(一),需要的朋友參考下吧2016-02-02Webpack?5新特性學(xué)習(xí)與性能優(yōu)化實(shí)踐
Webpack?5的新特性和改進(jìn)為前端開發(fā)者提供了更強(qiáng)大、更高效的構(gòu)建工具,通過內(nèi)置的持久性緩存插件、優(yōu)化的默認(rèn)配置、Webpack?CLI的改進(jìn)等,Webpack?5使得構(gòu)建過程更加簡化,性能更加優(yōu)越2024-05-05