基于正則表達式實現(xiàn)UL下LI的樣式替換功能
更新時間：2017年05月30日 14:15:35 作者：藍色水
這篇文章主要介紹了基于正則表達式實現(xiàn)UL下LI的樣式替換功能,涉及javascript使用正則表達式進行頁面元素屬性動態(tài)操作的相關實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了基于正則表達式實現(xiàn)UL下LI的樣式替換功能。分享給大家供大家參考，具體如下：
最先我想到是在UL下填充好在替換發(fā)覺結果差強人意，沒有真正改變樣式：
$("#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>");//將找到的關鍵字替換，加上highlight屬性；
$(this).text(newText);//更新文章；
});
其實應該在填充進UL前進行替換：
$("#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>");//將找到的關鍵字替換，加上highlight屬性；
$("#UlContent").append(newText);
}
});
PS：這里再為大家提供2款非常方便的正則表達式工具供大家參考使用：
JavaScript正則表達式在線測試工具：
http://tools.jb51.net/regex/javascript
正則表達式在線生成工具：
http://tools.jb51.net/regex/create_reg
希望本文所述對大家正則表達式學習有所幫助。
相關文章
這篇文章主要介紹了Python正則表達式操作指南的相關資料,需要的朋友可以參考下2015-09-09
正則表達式在程序開發(fā)中的應用非常廣泛，本文給大家分享了asp.net中17種常用的正則表達式，需要的朋友可以參考下2015-09-09
本文給給大家介紹正則表達式的基本語法，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了手機號碼驗證方法(正則驗證),在文章中還給大家補充了最新手機號的驗證正則表達式，需要的朋友可以參考下2017-02-02
初學正則時，對于Regex類不熟悉，遇到問題不知道該用哪種方法解決，本文結合一些正則應用的典型應用場景，介紹一下Regex類的基本應用。這里重點進行.NET類的介紹，對于正則的運用，不做深入探討2023-05-05
最近寫爬蟲時需要用到正則表達式，有段時間沒有使用正則表達式現(xiàn)在漸漸感覺有些淡忘，現(xiàn)在使用還需要去查詢一些資料2006-07-07
先掃盲一下什么是正則表達式的貪婪，什么是非貪婪？或者說什么是匹配優(yōu)先量詞，什么是忽略優(yōu)先量詞，好吧，下面通過實例給大家介紹下PHP 正則表達式效率 貪婪、非貪婪與回溯分析，一起看看吧2016-12-12
這篇文章主要介紹了正則表達式(regex)錯誤使用導致功能漏洞,需要的朋友可以參考下2015-10-10
先確定我們要解決的問題——從一段Html文本中找出特定id的標簽的innerHTML,需要的朋友可以參考下2020-02-02
用于過濾空白字符的幾種常見的正則表達式pattern——在JavaScript中的表現(xiàn)形式2010-12-12