基于正则表达式实现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

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

时间: 2024-09-17 03:54:39

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

浏览器-在win7系统下。网页用了ul,li里面的有些字不在一条线上。

问题描述 在win7系统下.网页用了ul,li里面的有些字不在一条线上. 在win8系统里,只有谷歌浏览器会出现问题,在mac系统里,都木有问题.老板说我们眼瞎,我们说电脑系统分辨率,字体渲染问题,还不相信.请各位大神有什么补救方法吗? 示例: <ul><li>农补查询</li></ul> 解决方案 浏览器不支持,没办法.让用户固定浏览器.或者单独优化谷歌 解决方案二: 调整css样式可以解决的问题.你试试line-height:设置ul的高度,间距等看是否

jQuery如何实现在ul下添加一张图片自动给改图片添加一个li标签啊

问题描述 jQuery如何实现在ul下添加一张图片自动给改图片添加一个li标签啊 我要实现的效果就是,在ul下添加N张图片,可以从后台任意添加,但是每添加一张图片,都会自动给该图片添加一个li标签,自动生成列表的效果,求大神们支个招,怎么弄, 小弟不会写jQuery语句,所以尽量请各位大侠帮忙写下,谢谢了 解决方案 $('#XXX').append('<li><img src="xxxx"/></li>') 解决方案二: 取得图片的id $('#XX

javaweb jq...-JQ在一个ul下所有的li上绑定单机事件 单机时获得ID

问题描述 JQ在一个ul下所有的li上绑定单机事件 单机时获得ID JQ在一个ul下所有的li上绑定单机事件 单机时获得ID 我写的这个不对!求JQ高手解答 解决方案 li 写成 il 了好像 解决方案二: $('#topic_ul').on('click','li',function.... 解决方案三: $(document).ready(function(){ $("#topic_ul li").each(function(){ $(this).click(function(){

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

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

案例详述常用的div ul li css样式

相信很多人在用div+ul+li+css样式来定义导航和栏目,今天我们通过网易网的案例来学习一下UL-LI样式的三种形式. <STYLE type=text/css> BODY { FONT-SIZE: 12px;FONT-FAMILY: "宋体", arial } .menu { CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px } .menu LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; P

用ul、li标签创建css横向导航菜单示例

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本 里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分 离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似

用ul、li做横向导航

原文:用ul.li做横向导航 1.生成Site.css文件(注:一定要将该文件的编码格式设置为utf-8,否则ie6有可能出现乱码) /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */}/

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

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

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

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