基于正则表达式实现UL下LI的样式替换功能

 更新时间:2017年05月30日 14:15:35   作者:蓝色水  
这篇文章主要介绍了基于正则表达式实现UL下LI的样式替换功能,涉及javascript使用正则表达式进行页面元素属性动态操作的相关实现技巧,需要的朋友可以参考下

本文实例讲述了基于正则表达式实现UL下LI的样式替换功能。分享给大家供大家参考,具体如下:

最先我想到是在UL下填充好在替换发觉结果差强人意,没有真正改变样式:

$("#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

希望本文所述对大家正则表达式学习有所帮助。

相关文章

  • 前端常用正则表达式汇总

    前端常用正则表达式汇总

    对于正则表达式,我们或许会经常使用,但是又很难记住。这篇文章,我将介绍下简单的正则表达式知识,然后总结前端开发中常用的正则表达式大全,需要的的朋友参考下
    2017-07-07
  • JavaScript 正则表达式之RegExp属性、方法及应用分析

    JavaScript 正则表达式之RegExp属性、方法及应用分析

    RegExp对象(至今为止我看到过的最通俗易懂和深入的正则表达式教程)JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例。有两种方式可以创建RegExp对象的实例。
    2009-12-12
  • 正则表达式模式匹配字符串基础知识

    正则表达式模式匹配字符串基础知识

    这篇文章主要介绍了正则表达式模式匹配字符串基础知识,分为匹配字符串的基本规则和正则匹配、查找与替代的知识,本文给大家介绍的非常不错,需要的朋友可以参考下
    2017-11-11
  • 论坛UBB代码 推荐

    论坛UBB代码 推荐

    论坛UBB代码 推荐...
    2006-07-07
  • 精确查找PHP WEBSHELL木马 修正版

    精确查找PHP WEBSHELL木马 修正版

    上篇提到了关于网上流传查找PHP webshell的python脚本中,不严谨的代码,并且给出了一个python的检测代码,同时,下文里也提到不能检测到反引号的命令执行的地方。今天,我想了下,现在把思路发出来。
    2011-04-04
  • 正则表达式\W元字符使用方法

    正则表达式\W元字符使用方法

    这篇文章主要介绍了正则表达式\W元字符使用方法,需要的朋友可以参考下
    2016-12-12
  • 正则表达式 应用四则

    正则表达式 应用四则

    正则表达式 应用四则...
    2007-01-01
  • python 正则表达式 反斜杠(/)的麻烦和陷阱

    python 正则表达式 反斜杠(/)的麻烦和陷阱

    这里是一点小心得。 由于正则表达式使用反斜杠来转义特殊字符,而python自身处理字符串时,反斜杠也是用于转义字符,这样就产生了一个双重转换的问题
    2009-08-08
  • 值得收藏的正则表达式大全

    值得收藏的正则表达式大全

    这篇文章主要为大家分享了正则表达式大全,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 用正则删除不包含某个字符串的行的代码

    用正则删除不包含某个字符串的行的代码

    这个需求发生在分析apache日志的时候。在日志中发现了一个比较可疑的ip,出现频率颇高,但每天的日志有几百万行,如何从中几百万行中找出需要的数据来进行分析呢?
    2009-09-09

最新评论