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


Posted in Javascript onDecember 29, 2014

在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。

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

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

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
jQuery中:animated选择器用法实例
Dec 29 #Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 #Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 #Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 #Javascript
jQuery中:header选择器用法实例
Dec 29 #Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 #Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 #Javascript
You might like
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php通过各种函数判断0和空
2020/07/04 PHP
总结一些js自定义的函数
2006/08/05 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
python图像处理之反色实现方法
2015/05/30 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python多进程原理与用法分析
2018/08/21 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python集合操作方法详解
2020/02/09 Python
Python中求对数方法总结
2020/03/10 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
人力资源管理专业自荐书范文
2014/02/10 职场文书
跑操口号
2014/06/12 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年体育工作总结
2014/11/24 职场文书
大学生暑假实习总结
2015/07/13 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS