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

本文实例讲述了基于正则表达式实现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

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

赞 (0)

相关推荐

  • 用正则表达式替换图片地址img标签

    开始想到的解决方法是: 复制代码 代码如下: content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) {    console.log(match);}); 输出结果是: 复制代码 代码如下: <img src="http://www.jb51.net/images/logo.gif" alt="" width="142&

  • 正则表达式替换html元素属性的方法

    正则表达式替换任意html元素任意属性,或增加任意属性. /** * 替换html中任意tag内任意attr值 * @param src_str * @param tag * @param attr * @param val * @returns {*} */ replace_html_tag_attr: function(src_str, tag, attr, val) { if(typeof src_str === 'undefined' || typeof tag === 'undefin

  • java正则表达式获取指定HTML标签的指定属性值且替换的方法

    实例如下: public static String repDomain(String source, String domain, String element, String attr) { String img = ""; Pattern p_image; Matcher m_image; String regEx_img = "<" + element + "[^<>]*?\\s" + attr + "=['\

  • asp 使用正则表达式替换word中的标签，转为纯文本

    公司客户在使用网站后台编辑添加修改内容时,经常是直接从word文档里复制内容到编辑器里后就提交.结果是在内容显示页面上是五花八门的样式,有时也需要部分纯文本内容作为摘录使用,这些都需要清除word格式.改变客户的习惯要客户先复制到记事本里再粘贴到编辑器里编辑是很难的,所以从我们自己改变起.从网上百度了若干清除word格式的正则,使用效果不甚理想,所以自己写了清除word格式的asp函数,能满足我们自己的使用需求.函数如下: 复制代码 代码如下: function cleanWord(html)

  • jQuery使用正则表达式替换dom元素标签用法示例

    本文实例讲述了jQuery使用正则表达式替换dom元素标签用法.分享给大家供大家参考,具体如下: 这里主要通过如下正则表达式来替换dom元素中的标签: /<[\/]?(div)([^<>]*)>/g 具体示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

  • 使用正则表达式匹配[***]样式的字符串

    使用正则表达式匹配[***]样式的字符串

    源码如下: 复制代码 代码如下: - (NSUInteger)analyseRX:(NSString *)string withPatternString:(NSString *)patternString{    //     \\[[^\\]]+\\]  用以匹配字符串中所出现的 [*] 的个数    //     <[^>]+>        用以匹配字符串中所出现的 <*> 的个数 if (string == nil)    {        return 0;   

  • 正则表达式,替换所有HTML标签的简单实例

    我自己写了一个正则表达式,<(.|\n)+?> 这个是替换所以HTML标签,非贪婪的,多行的. 如果我想替换得到所以非HTML标签, 我的代码就只能是这样,先找打HTML标签,然后将标签替换掉. 能不能直接找到非HTML标签呢.. 还有个问题就是,,截取字符串的长度. 我下面的这种方法,没有判断中文或者非中文,截取的长度总是有长有短. 不知道有没有好点的办法让截取的长度,一样长的,而不是str.Length的长度. public static string formatString(strin

  • PHP实现通过正则表达式替换回调的内容标签

    本文实例讲述了PHP实现通过正则表达式替换回调的内容标签.分享给大家供大家参考.具体实现方法如下: function my_wp_plugin_tag_action($content,$tag,$function,$args = FALSE) { // match all regular expressions preg_match_all($tag,$content,$matches); if (count($matches)>0) { // filter duplicates $matche

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

    本文实例讲述了基于正则表达式实现UL下LI的样式替换功能.分享给大家供大家参考,具体如下: 最先我想到是在UL下填充好在替换发觉结果差强人意,没有真正改变样式: $("#UlContent li").each(function (index) { // alert(index + ': ' + $(this).text()); var text = $(this).text(); var regExp = new RegExp($("#search_content"

  • JS遍历ul下的li点击弹出li的索引的实现方法

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • 基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法

    基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

  • 基于jquery实现三级下拉菜单

    本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下 在写这个的时候,首先要捋顺思路.点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等. 大致代码如下: <body> <aside> <ul class="one"> <li> <a href="#" class="a">目录A</a> <ul class=&quo

  • bootstrap下拉分页样式 带跳转页码

    bootstrap下拉分页样式 带跳转页码

    本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下 bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改 <!--/分页--> <div class="container"> <div class="row myCenter"> <div class="col-xs-6 col-md-12 col-center-block"

  • jQuery基于正则表达式的表单验证功能示例

    本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • java基于正则表达式实现时间日期的常用判断操作实例

    本文实例讲述了java基于正则表达式实现时间日期的常用判断操作.分享给大家供大家参考,具体如下: 最近需要完成一个判断用户输入时间日期类型来进行相应操作的业务.实现这个功能自然少不了用到正则表达式,提高正则表达式的话,其实它的用法很简单,只需把这个表格记住并且会灵活运行就可以了. 元字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符.例如,"\n"匹配字符"n"."\\n"匹配一个换行符.序列&qu

  • Java读取文件及基于正则表达式的获取电话号码功能详解

    Java读取文件及基于正则表达式的获取电话号码功能详解

    本文实例讲述了Java读取文件及基于正则表达式的获取电话号码功能.分享给大家供大家参考,具体如下: 1.正则表达式 正则表达式,又称 正规表示法 . 常规表示法 (英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里,正则表达式通常被用来检索.替换那些符合某个模式的文本. 用到的一些特殊构造正则表达式的意义解析: ? 当该字符 紧跟在任何一个其他限

  • Python基于正则表达式实现文件内容替换的方法

    本文实例讲述了Python基于正则表达式实现文件内容替换的方法.分享给大家供大家参考,具体如下: 最近因为有一个项目需要从普通的服务器移植到SAE,而SAE的thinkphp文件结构和本地测试的有出入,需要把一些html和js的引用路径改成SAE的形式,为了不手工改,特地速成了一下Python的正则表达式和文件操作.主要要求是将某目录下的html和js里面的几个路径变量分别更改成相应的形式,匹配文件名的时候用了正则 import os import re #all file in the dir

随机推荐