基于正則表達(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)行頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了基于正則表達(dá)式實(shí)現(xiàn)UL下LI的樣式替換功能。分享給大家供大家參考，具體如下：
最先我想到是在UL下填充好在替換發(fā)覺(jué)結(jié)果差強(qiáng)人意，沒(méi)有真正改變樣式：
$("#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á)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript
正則表達(dá)式在線生成工具：
http://tools.jb51.net/regex/create_reg
希望本文所述對(duì)大家正則表達(dá)式學(xué)習(xí)有所幫助。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Python正則表達(dá)式操作指南的相關(guān)資料,需要的朋友可以參考下2015-09-09
正則表達(dá)式在程序開(kāi)發(fā)中的應(yīng)用非常廣泛，本文給大家分享了asp.net中17種常用的正則表達(dá)式，需要的朋友可以參考下2015-09-09
本文給給大家介紹正則表達(dá)式的基本語(yǔ)法，需要的朋友可以參考下2015-10-10
手機(jī)號(hào)碼驗(yàn)證方法(正則驗(yàn)證)
這篇文章主要介紹了手機(jī)號(hào)碼驗(yàn)證方法(正則驗(yàn)證),在文章中還給大家補(bǔ)充了最新手機(jī)號(hào)的驗(yàn)證正則表達(dá)式，需要的朋友可以參考下2017-02-02
.NET正則基礎(chǔ)之.NET正則類及方法應(yīng)用
初學(xué)正則時(shí)，對(duì)于Regex類不熟悉，遇到問(wèn)題不知道該用哪種方法解決，本文結(jié)合一些正則應(yīng)用的典型應(yīng)用場(chǎng)景，介紹一下Regex類的基本應(yīng)用。這里重點(diǎn)進(jìn)行.NET類的介紹，對(duì)于正則的運(yùn)用，不做深入探討2023-05-05
最近寫(xiě)爬蟲(chóng)時(shí)需要用到正則表達(dá)式，有段時(shí)間沒(méi)有使用正則表達(dá)式現(xiàn)在漸漸感覺(jué)有些淡忘，現(xiàn)在使用還需要去查詢一些資料2006-07-07
PHP 正則表達(dá)式效率 貪婪、非貪婪與回溯分析(推薦)
先掃盲一下什么是正則表達(dá)式的貪婪，什么是非貪婪？或者說(shuō)什么是匹配優(yōu)先量詞，什么是忽略優(yōu)先量詞，好吧，下面通過(guò)實(shí)例給大家介紹下PHP 正則表達(dá)式效率 貪婪、非貪婪與回溯分析，一起看看吧2016-12-12
正則表達(dá)式(regex)錯(cuò)誤使用導(dǎo)致功能漏洞分析
這篇文章主要介紹了正則表達(dá)式(regex)錯(cuò)誤使用導(dǎo)致功能漏洞,需要的朋友可以參考下2015-10-10
正則表達(dá)式匹配閉合HTML標(biāo)簽(支持嵌套)
先確定我們要解決的問(wèn)題——從一段Html文本中找出特定id的標(biāo)簽的innerHTML,需要的朋友可以參考下2020-02-02
用于過(guò)濾空白字符的幾種常見(jiàn)的js正則表達(dá)式pattern
用于過(guò)濾空白字符的幾種常見(jiàn)的正則表達(dá)式pattern——在JavaScript中的表現(xiàn)形式2010-12-12