基于正則表達(dá)式實(shí)現(xiàn)UL下LI的樣式替換功能
更新時(shí)間：2017年05月30日 14:15:35 作者：藍(lán)色水
這篇文章主要介紹了基于正則表達(dá)式實(shí)現(xiàn)UL下LI的樣式替換功能,涉及javascript使用正則表達(dá)式進(jìn)行頁面元素屬性動(dòng)態(tài)操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了基于正則表達(dá)式實(shí)現(xiàn)UL下LI的樣式替換功能。分享給大家供大家參考，具體如下：
最先我想到是在UL下填充好在替換發(fā)覺結(jié)果差強(qiáng)人意，沒有真正改變樣式：
$("#UlContent li").each(function (index) {
// alert(index + ': ' + $(this).text());
var text = $(this).text();
var regExp = new RegExp($("#search_content").val(), 'g');
var newText = text.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//將找到的關(guān)鍵字替換，加上highlight屬性；
$(this).text(newText);//更新文章；
});
其實(shí)應(yīng)該在填充進(jìn)UL前進(jìn)行替換：
$("#search_content").keyup(function () {
if(CheckChinese($("#search_content").val()))
{
$.ajax({
type: "POST",
anync: true,
url: "HelpCenterSuggestion.ashx",
cache: false,
dataType: "text",
data: { m: $("#search_content").val() },
success: function (result) {
$("#UlContent li").remove();
var regExp = new RegExp($("#search_content").val(), 'g');
var newText = result.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//將找到的關(guān)鍵字替換，加上highlight屬性；
$("#UlContent").append(newText);
}
});
PS：這里再為大家提供2款非常方便的正則表達(dá)式工具供大家參考使用：
JavaScript正則表達(dá)式在線測試工具：
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg
希望本文所述對(duì)大家正則表達(dá)式學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要介紹了正則表達(dá)式問號(hào)的四種用法詳解的相關(guān)資料,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了C#中正則表達(dá)式與回車換行符問題,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了php 正則去掉<p> </p> 空格 與<p><br/></p>,需要的朋友可以參考下2020-02-02
最新最全的手機(jī)號(hào)驗(yàn)證正則表達(dá)式
我們再開發(fā)項(xiàng)目時(shí),總是要用到一些正則驗(yàn)證,就數(shù)手機(jī)號(hào)碼規(guī)則比較難收集,這篇文章主要給大家介紹了關(guān)于最新最全的手機(jī)號(hào)驗(yàn)證正則表達(dá)式,需要的朋友可以參考下2022-02-02
正則表達(dá)式(regular expression)描述了一種字符串匹配的模式，可以用來檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等2006-09-09![正則表達(dá)式[\s\S]*與[\w\W]* 什么意思](http://img.jbzj.com/images/xgimg/bcimg5.png)
很多人咨詢[\s\S]*與[\w\W]* 什么意思，不是有.了嗎，那么它們的組合，表示所有的都匹配，與它相對(duì)應(yīng)的，有[\w\W]等，意義完全相同,需要的朋友可以參考下2020-03-03
javascript 數(shù)字的正則表達(dá)式集合
這里收集的是驗(yàn)證數(shù)字的正則表達(dá)式集合，比較的全了，需要驗(yàn)證數(shù)字的朋友很值得參考下。2010-04-04
在實(shí)際例子中學(xué)習(xí)正則表達(dá)式(高效率)
正則表達(dá)式，又稱正規(guī)表示法、常規(guī)表示法。下面小編給大家分享幾個(gè)例子給大家講下正則表達(dá)式知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
用JS讓文章內(nèi)容指定的關(guān)鍵字加亮...2006-12-12
asp.net中利用正則表達(dá)式判斷一個(gè)字符串是否為數(shù)字的代碼
asp.net中利用正則表達(dá)式判斷一個(gè)字符串是否為數(shù)字的代碼，需要的朋友可以參考下。2011-12-12