jQuery中用dom操作替代正则表达式

在B/S结构客户端越来越“胖”的今天，作为一名全端程序员，您很可能会在前端操作html字符串，注意，是操作html字符串，不是操作当前页面的html。

举个例子，百度推出的在线HTML富文本编辑器Ueditor，可以在线制作富文本文档，功能堪比精简版的Microsoft Word。虽然Ueditor身披百度的光环，但实际效果不太让人满意，我们需要二次处理一下它生成的html字符串，比如把所有图片的宽度设成90%。

通过某个方法，我们可以拿到文本编辑器中的html字符串，假设字符串如下：

代码如下:

<p>花一样的骚年</p>
<img src="./saonian.png" alt="骚年自拍" >
<p>迷一样的金字塔</p>
<img style="height:30px;" src="./jinzita.png" alt="中国金字塔" >
<p>梦一样的人生</p>
<img style="width:50px;height:30px;" src="./rensheng.png" alt="人生百态" >

但是接下来如何处理呢？优雅的处理字符串，让我们很容易想到正则表达式，这里我们可不可以用正则呢？

答案是肯定的，先试试正则的效果。把所有图片宽度设成90%，最简单的方法是在img标签中加入style属性，然后在style中指定宽度。

用正则，第一步，先要匹配到所有img标签，由于img标签不一定有style属性，要先判断是否有style属性，接下来直接在style属性中加入width: 90%;？不，这样可能会覆盖掉原有的其他属性，那就直接追加，追加不会覆盖！还是不行，万一原来就有width呢。。。

还没开始写正则表达式，先想想过程，就已经很繁琐了，其实实现起来更加复杂。

幸好我们可以换个思路，借助于jQuery解决这个问题。

jQuery强大之处在于，它能直接将一个html字符串包装成dom元素，这个dom元素不存在于当前页面中，它是放在内存中的。

通过jQuery，只需要这样一段代码即可实现：

代码如下:

//定义容器，方便获取修改后的html字符串
 //直接用jQuery包装"<div></div>"，此时在内存中就有了一个div元素
 var $container = $("<div></div>");
 //假设这是需要修改的html字符串
 var html = "<img style='width: 50%;' src='./test.jpg' >";
 //直接将要修改的html字符串插入到容器中
 //jQuery强大到自动将html字符串包装成dom元素，然后插入到内存中的div容器中
 $container.append(html);
 //在容器中搜索所有的img标签，并遍历
 $container.find("img").each(function(i,n){
   //对于每一个img元素，直接修改其style属性中的width属性
   //如果style属性没有，自动添加；如果已经有width属性，直接修改；完全不用过多操心
   $(n).css({
     width: "90%"
   });
 });
 //获取修改后的html字符串，即容器的html内容
 alert($container.html());

代码中注释很详细，小菜就不多解释啦，我们要明白，jQuery不仅仅可以操作实实在在的页面中的html，也可以操作内存中的虚拟html。

通过两者对比，相信读者立即可以体会到哪个方法更好一些。

正如小菜经常说的一句话：如果你认为一个问题可以解决，但用了很长时间仍然没有解决，很可能是你的思路错了，换个角度想一想，问题迎刃而解！

赞 (0)

相关推荐

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • 深入理解jQuery中live与bind方法的区别

    注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间 区别一: Click here 可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() {$('body').append(' Another target');}); 当点击了元素,就会弹出一个警告框.然后,想象一下这之后有另一个元素添加进来了. 尽管

  • jquery live()调用不存在的解决方法

    jquery live()调用不存在的解决方法

    在新版的jquery中,live()方法已经被删除了,所以我们在调用的时候会提示该函数不存在,js报错. 解决方法是使用on()函数替换, 原来的写法是:  如果直接替换为on()方法,那么新生成的元素再次点击事件的时候不会有任何效果,新的语法是:  这里涉及到一个问题,$("body")这里为什么是body,其实我们可以选择其他的距离#company_logo更近的节点,这样会有更好的性能,其实on()是在body中找#company_logo节点,所以我们吧body换成#compa

  • jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型:eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事

  • jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){

  • jquery ui dialog替代confirm实例分析

    本文实例讲述了jquery ui dialog替代confirm的方法.分享给大家供大家参考,具体如下: js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能 1.html代码 <div id="confirm_dialog" title="提示" style="display:none;"> </div> 把上面代码放到公用的地方 2.

  • jQuery EasyUI 开源插件套装 完全替代ExtJS

    jQuery EasyUI 开源插件套装 完全替代ExtJS

    前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码 代

  • 浅谈被jQuery抛弃的函数及替代函数

    早前为了更好的浏览器兼容性,一直是使用jQuery-1.7.2版本:但是随着各大浏览器和技术的飞速发展,连bootstrap新版本都是需要引入jQuery-1.9以上的版本,代表着常用的jQuery-1.7.2也该告别历史舞台了: 但 是有些我们常用的函数也被弃用了:不注意的话就会各种报错:下面就来盘点这些已经被抛弃的函数:当然如果你不认识介绍的这些被弃函数:那恭喜你不需要去记 了,只需要理解它的替代函数即可:本文的意义是提醒亲们哪些函数被弃用了以及该用那些函数来替代:至于替代函数具体使用方法请

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquery-1.9.0.js'></script

  • jQuery1.9+中删除了live以后的替代方法

    根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名.id或者元素名,使用它就可以实现live的效果. 例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样

  • jQuery 1.9移除了$.browser可以使用$.support来替代

    $.browser是通过正则表达式来匹配userAgent来判断浏览器版本和种类的.jquery1.3.2版本的文档中已经声明jquery.browser及jquery.browser.version建议弃用,可以使用jquery.support来代替. jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,

  • jQuery中.live()方法的用法深入解析

    给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法. 更多详情还见官网http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效. 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此

  • jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码 代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候 菜单还没加载出来呢,所以就要用到

随机推荐