kindeditor及其他现在编辑器获取文章内容中的图片标签及其src实现
2013-11-07 11:49
597 查看
近日,需要实现获取editor中的内容中的图片,罗列出这些图片,选择其中一张作为焦点新闻的焦点图。后来在网上搜到两个正则表达式,搞定了该问题。
匹配出<img/>标签的正则: /<img.*?(?:>|\/>)/gi
匹配src的正则: /src=[\'\"]?([^\'\"]*)[\'\"]?/i
PS:测试代码0积分下载地址:http://download.csdn.net/detail/he20101020/6517317
匹配出<img/>标签的正则: /<img.*?(?:>|\/>)/gi
匹配src的正则: /src=[\'\"]?([^\'\"]*)[\'\"]?/i
var imgReg = /<img.*?(?:>|\/>)/gi; var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; function getImgSrc(){ //添加到div时先清空该div中内容 $("#image_show_div").empty(); var str = contentValue.html();//这是从kindeditor中读出的content内容,测试时可以先指定一串字符串
str = '<p>asdf<img src="/cxzy_manage/attached/image/20131030/20131030172732_949.jpg" alt="" />asdfasdfasdf</p><p><img src="/cxzy_manage/attached/image/20131030/20131030172732_397.gif" alt="" />aasdfasdf</p><p><br /></p><p><img src="/cxzy_manage/attached/image/20131030/20131030172732_869.gif" alt="" />adsfasdf</p><p><img src="/cxzy_manage/attached/image/20131030/20131030172732_918.gif" alt="" />asdfasdf<p><img src="/cxzy_manage/attached/image/20131030/20131030172732_621.gif" alt="" /></p><p><br /></p>';
//匹配图片(g表示匹配所有结果i表示区分大小写) //匹配src属性 var arr = str.match(imgReg); if(arr == null){ alert("新闻内容中还未上传图片,请先上传再设置,谢谢!");return; } //alert('所有已成功匹配图片的数组:'+arr); for (var i = 0; i < arr.length; i++) { if(i==0) checkStr = 'checked="checked"'; else checkStr = '';//控制第一个radio为选中状态 var src = arr[i].match(srcReg); $("#image_show_div").append("<label style='cursor:pointer;'>"+arr[i]+"<input "+checkStr+" type='radio' name='cover_image' value='"+src[1]+"'/></label>"); //获取图片地址 if(src[1]){ //alert('已匹配的图片地址'+(i+1)+';:'+src[1]); } //当然你也可以替换src属性 if (src[0]) { // var t = src[0].replace(/src/i, "href"); //alert(t); } } }
PS:测试代码0积分下载地址:http://download.csdn.net/detail/he20101020/6517317
相关文章推荐
- ios 隐藏键盘
- 原生应用native、Web应用、混合应用hybrid:3者的优缺点解析
- 从程序员到项目经理(十四):项目经理必须懂一点“章法”
- MYSQL判断某个表是否已经存在
- 网站优化需要养成的习惯
- mysql无法修改密码的解决办法
- 日期加天数得到新的日期
- 翻译:Linux的电源管理架构
- 对于形式参数只能用final修饰符,其它任何修饰符都会引起编译器错误
- android 几个工具方法
- 水晶报表 自定义打印纸张
- Aandroid在ViewPager中添加ListView
- Linux的shell中echo改变输出显示样式
- tcpdump使用方法
- SharePoint GroupedItemPicker Control
- Shell常用处理字符串方法(备查)
- 日期差
- WAMP Server下安装PEAR
- java类之Person
- ifnet详解-84页