当前位置:首页 > 日记 > 正文

在jQuery中用DOM操作替换正则表达式

在jQuery中用DOM操作替换正则表达式
随着B/s结构的客户机越来越胖,作为一个完整的程序员,您可能会操纵前端的HTML字符串,并注意到它是HTML字符串的操作,而不是当前页面的HTML操作。

例如,百度的在线HTML富文本编辑器UEditor,使富文本文件在线,与微软Word的简化版本。虽然UEditor是穿着百度的光环,实际效果不理想。我们需要处理生成的HTML字符串两次,例如,所有图片的宽度设置为90%。

通过某种方法,我们可以在文本编辑器中获得HTML字符串,假设字符串如下所示:

复制代码代码如下所示:

同年的一朵花
金字塔扇
如梦般的生活
但是下一步该怎么处理呢优雅的处理字符串使我们很容易想到正则表达式。这里可以用普通的吗

答案是肯定的。第一次尝试正规的效果。设置所有宽度的图片90%,最简单的方法是添加样式属性的img标签,然后指定宽度的风格。

有规律的,第一步是先匹配所有img标签。因为img标签并不总是样式属性,我们首先需要确定样式属性是可用的,然后添加宽度:90%直接到样式属性。不,这可以覆盖原有的其他属性,这是直接添加,并不会掩盖它!不,以防宽度。

正则表达式尚未启动。考虑这个过程是非常复杂的,但实际上更复杂。

幸运的是,我们可以改变我们的思维方式,借助jQuery解决这个问题。

jQuery的优点在于它可以直接将HTML字符串封装到DOM元素中,而在当前页面中不存在,它被放置在内存中。

通过jQuery,只需要执行这样一段代码。

复制代码代码如下所示:

定义容器,轻松访问HTML修改字符串

直接使用jQuery包

容器= $( );

如果这是要修改的html字符串

var;

html将直接将字符串修改到容器中。

jQuery足够强大,可以自动将HTML字符串作为DOM元素包装,并将其插入到内存中的div容器中。

container.append美元(HTML);

/ /搜索所有img标签的容器中,并遍历

container.find美元(IMG)。每个(函数(i,n){

/ /每个img元素,改变它的样式属性width属性直接

如果样式属性不自动添加,如果您已经具有宽度属性,可以直接修改;不必担心太多。

$(n)Css({

宽度:90%

});

});

获取html修改的字符串,即容器的HTML内容

警报($ container.html());
代码中的注释非常详细,所以对菜品没有太多的解释。我们需要理解jQuery不仅可以在真实页面中运行HTML,还可以在内存中运行虚拟HTML。

相反,人们相信读者能马上意识到哪种方法更好。

正如一道菜经常说的,如果你认为一个问题是可以解决的,但要解决这个问题需要很长时间,那可能是你的思维方式不对。如果你从另一个角度来考虑它,它将被解决。

相关文章

JDBC连接数据库步骤的深入分析

JDBC连接数据库步骤的深入分析

步骤,连接数据库,电脑软件,JDBC,创建一个连接JDBC数据库的程序,包括7个步骤: 1。加载JDBC驱动程序: 连接数据库之前,首先要加载数据库,你想连接到JVM(java虚拟机)。 这是通过静态方法执行forName(String className)的java.lang.class类。 例如: 复制…

PS图象处理软件是野草的美和漂亮的

PS图象处理软件是野草的美和漂亮的

韩国,野草,褐色,图象,处理软件,地图色彩的效果主要分为两个步骤:首先需要用调色板工具来转,主要颜色是红棕色,蓝色的天空可以保留;然后增加区域的深蓝色紫色,浅蓝色和高光的增加,整个过程可以是温和的。 地图色彩的效果主要分为两个步骤:首先需要…

PHP魔法变量用法详解

PHP魔法变量用法详解

变量,详解,魔法,电脑软件,PHP,本文介绍了PHP的魔术变量的使用,这是新的__dir__ PHP5.3,分享给大家参考使用。具体分析如下: 系统常数 __file__当前文件名 在__line__当前行数 __function__当前函数名 __class__当前类的名字 __method__…

插图画家用毛笔制作中文书法教程

插图画家用毛笔制作中文书法教程

教程,中文,图画,电脑软件,本教程主要使用插图制作简单的手写毛笔字,教程的过程不是很难。喜欢的朋友可以一起学习教程。 本教程主要使用插图制作简单的手写毛笔字,教程的过程不是很难。喜欢的朋友可以一起学习教程。…

PS外部过滤器把帅哥照片变成漂亮的

PS外部过滤器把帅哥照片变成漂亮的

过滤器,照片,插图,帅哥,漂亮,本教程是向朋友介绍的,使用PS外部过滤器将帅哥照片转化为审美插画效果。教程产生的效果非常好。建议像你这样的朋友一起学习这个教程。 本教程教PS照片处理学习者使用PS滤镜把外部照片变成漂亮的插图,手绘教程是…

PHP+mysqli实现数据库中的表的信息

PHP+mysqli实现数据库中的表的信息

方法,数据库中,电脑软件,PHP,mysqli,本文阐述了PHP + mysqli实现方法打印表格信息(包括标题)到一个数据库中的表。分享给你供你参考。以下是如下: 代码的这一部分将被查看。我们需要学习基本知识: 复制代码代码如下: $ mysqli =新的mysqli(loc…

InDesign布局设计案例说明(教程)

InDesign布局设计案例说明(教程)

布局,教程,案例,电脑软件,InDesign,本教程为您讲解InDesign布局设计的教程,非常实用,为设计人员很有帮助,我希望你喜欢它 本教程为您讲解InDesign布局设计的教程,非常实用,为设计人员很有帮助,我希望你喜欢它!以下是以下内容: 本教程的结束,希望对…

Javascript中的值是通过值传递还是通过引

Javascript中的值是通过值传递还是通过引

引用传递,值传递,电脑软件,Javascript,最近有一个有趣的问题:js中的值是通过值还是引用传递的 在我们分析这个问题之前,我们需要知道什么叫值,什么是引用,在计算机科学中,这个部分叫做评价策略,它决定变量之间的值,函数调用和参数之间的值是如何传…

浅谈面向对象类中javascript的实现

浅谈面向对象类中javascript的实现

面向对象,浅谈,类中,电脑软件,javascript,物体是人们想要研究的任何东西,从最简单的整数到复杂的飞行器等等,都可以看作是一个物体。它不仅能表达具体的事物,而且能表达抽象的规则、计划或事件。——百度百科 面向对象编程(OP)是最流行的编程模…

PS图象处理软件以时尚大气与流美的

PS图象处理软件以时尚大气与流美的

美的,图象,大气,处理软件,海报,流体效应更为常用。例如,发现以下效果。作者会找到一些动态的人物图片,然后在衣服的边缘添加一些液体,然后添加一些几何图形和黑白背景。时尚的气氛充满紧张气氛。 流体效应更为常用。例如,我们应该找到一个相对…

PS图象处理软件净GIF动态惊艳

PS图象处理软件净GIF动态惊艳

动态,图象,处理软件,惊艳,电脑软件,本教程是GIF动态图片的制作方法到惊人的PS图象处理软件教程制作的效果很漂亮,很简单的方法,这里推荐爱的朋友可以跟着教程一起学习 我经常在网上看到一些动态的图片,他们觉得很刺眼。事实上,只要我们想做,我们…

jQuery实现瀑布流布局

jQuery实现瀑布流布局

瀑布流布局,电脑软件,jQuery,HTML 复制代码代码如下所示: CSS 复制代码代码如下所示: { * 保证金:0; 填充:0; } { #主要 职位:相对; } {。箱 填充物:00 15px 15px; 浮点数:左; } {。PIC 填料:10px; 边境:1px solid # CCC; 边界半径:5…