在jQuery中用DOM操作替换正则表达式
例如,百度的在线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。
相反,人们相信读者能马上意识到哪种方法更好。
正如一道菜经常说的,如果你认为一个问题是可以解决的,但要解决这个问题需要很长时间,那可能是你的思维方式不对。如果你从另一个角度来考虑它,它将被解决。