基于正則表達(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ā)覺結(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á)式在線測(cè)試工具：
http://tools.jb51.net/regex/javascript

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

希望本文所述對(duì)大家正則表達(dá)式學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

正則表達(dá)式問號(hào)的四種用法詳解
這篇文章主要介紹了正則表達(dá)式問號(hào)的四種用法詳解的相關(guān)資料,需要的朋友可以參考下
2015-09-09
C#中正則表達(dá)式與回車換行符問題
這篇文章主要介紹了C#中正則表達(dá)式與回車換行符問題,需要的朋友可以參考下
2018-03-03
php 正則去掉 空格與<br/
這篇文章主要介紹了php 正則去掉  空格  與 ,需要的朋友可以參考下
2020-02-02
最新最全的手機(jī)號(hào)驗(yàn)證正則表達(dá)式
我們?cè)匍_發(fā)項(xiàng)目時(shí),總是要用到一些正則驗(yàn)證,就數(shù)手機(jī)號(hào)碼規(guī)則比較難收集,這篇文章主要給大家介紹了關(guān)于最新最全的手機(jī)號(hào)驗(yàn)證正則表達(dá)式,需要的朋友可以參考下
2022-02-02
正則表達(dá)式的語法
正則表達(dá)式(regular expression)描述了一種字符串匹配的模式，可以用來檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等
2006-09-09
$正則表達(dá)式[\s\S]*與[\w\W]* 什么意思$
正則表達(dá)式[\s\S]*與[\w\W]* 什么意思
很多人咨詢[\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)鍵字加亮
用JS讓文章內(nèi)容指定的關(guān)鍵字加亮...
2006-12-12
asp.net中利用正則表達(dá)式判斷一個(gè)字符串是否為數(shù)字的代碼
asp.net中利用正則表達(dá)式判斷一個(gè)字符串是否為數(shù)字的代碼，需要的朋友可以參考下。
2011-12-12