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 相关文章推荐
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
基于openlayers实现角度测量功能
Sep 28 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
vue视图不更新情况详解
2019/05/16 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
vue实现购物车列表
2020/06/30 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
工作表现评语
2014/01/19 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
入学证明
2015/06/23 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电