快捷導(dǎo)航

js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能示例

更新時(shí)間：2016年12月27日 10:55:35 作者：stepday

這篇文章主要介紹了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能,可實(shí)現(xiàn)關(guān)鍵詞描紅的功能,涉及JS重復(fù)匹配的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能。分享給大家供大家參考，具體如下：

今天想把網(wǎng)站上關(guān)于用戶搜索資料后的結(jié)果列表進(jìn)行處理，如同百度搜索一樣，加入我搜索框中輸入“我要日日發(fā)網(wǎng)絡(luò)”，點(diǎn)擊搜索按鈕所得的結(jié)果列表中將會出現(xiàn)“我要日日發(fā)網(wǎng)絡(luò)”字符串為紅色。

我今天想到用js來進(jìn)行處理，就是利用js內(nèi)的replace函數(shù)對結(jié)果列表內(nèi)的字符串進(jìn)行指定字符串的替換工作，開始我是這樣寫的

<script type="text/JavaScript" language="javascript">
<!--
  function ReplaceStr(str) {
   var content = document.getElementById("content").innerHTML;
   content = content.replace(str, "<font color='red'>" + str + "</font>");
   document.getElementById("content").innerHTML = content;
  }
  ReplaceStr("日日發(fā)");
// -->
</script>

最后運(yùn)行頁面發(fā)現(xiàn)只替換掉了第一個(gè)“日日發(fā)”字符串，其他“日日發(fā)”字符串沒有被替換掉，開始百思不得其解，后來在朋友的幫助下了解到j(luò)s內(nèi)的replace和c#內(nèi)的replace有很大的不同，js內(nèi)的replace默認(rèn)的只是對字符串進(jìn)行一次掃描。那么利用js的replace函數(shù)如何才能夠達(dá)到字符串全部替換的效果呢？這里我們就必須引入正則式了的，修改后的js函數(shù)如下所示：

<script type="text/javascript" language="javascript">
<!--
  function ReplaceStr(str) {
   var content = document.getElementById("content").innerHTML;
   content = content.replace(new RegExp(str,"gi"), "<font color='red'>" + str + "</font>");
   document.getElementById("content").innerHTML = content;
  }
  ReplaceStr("日日發(fā)");
// -->
</script>

這兩者一比較就很清楚問題出在哪里了的，利用正則式很輕松地解決了問題，在這里 new RegExp(str,"gi") 這句話是什么意思呢？

后來查閱了一些資料，g - 從頭至尾掃描完一次整個(gè)字符串，i- 不區(qū)分替換字符串的大小寫。那么整個(gè)語句的意思就好理解了的。

PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：

JavaScript正則表達(dá)式在線測試工具：
http://tools.jb51.net/regex/javascript

正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg