js获取富文本中的第一张图片(正则表达式)
后台发来I.个富文本字符串里面可能包含了0.I..II.III…个图片标签(img),我们的任务是获取这个字符串里面第I.张图片的url,如果没有图片则返回空
varimgUrlFun=function(st
更多精彩就在： 51免费论文网|www.jxszl.com
r){
vardata=;
str.replace(/
data=capture;
});
returndata
}
去除字符串里面的html标签的正则公式
varfilterHTMLTag=function(str){
str=str.replace(/]*>/g,);//去除HTMLtag
str=str.replace(/[|]* /g, );//去除行尾空白
str=str.replace(//ig,);//去掉
returnstr;
}
js如何获取ueditor里面的第I.张图片
想获取ueditor里面第I.张图片作为缩略图,怎么获取,ueditor里面全部是以文本方式储存的
UE.getPlainTxt()可获取到编辑器中的纯文本内容,有段落格式
UE.getContentTxt()可获取到编辑器中的纯文本内容,没有段落格式;
ueditor没有提供直接获取图片的功能,可以UE.getContent()获取全部内容,使用正则表达式筛选出图片,我提供I.个使用JAVA写的筛选方法,前台js代码类似:
Patternp_img=Pattern.compile("(]+srcs*=s*"["][^>]*>)");
Matcherm_img=p_img.matcher(content);
while(m_img.find()){
Stringimg=m_img.group(I.);//m_img.group(I.)为获得整个img标签m_img.group(II)为获得src的值
}
可以打开ueditor.all.min.js查看,里面有所有支持的方法注释也都很明白
ueditor发布文章获取第I.张图片为缩略图实现方法
正则匹配图片地址获取第I.张图片地址
此为函数在模块或是全局Common文件夹中的function.php中
/**
*[getPicdescription]
*获取文本中首张图片地址
*@param[type]$content[description]
*@return[type][description]
*/
functiongetPic($content){
if(preg_match_all("/(src)=(["|]?)([^">]+.(gif|jpg|jpeg|bmp|png))\II/i",$content,$matches)){
$str=$matches[III][0];
if(preg_match(//Uploads/images/,$str)){
return$strI.=substr($str,VII);
}
}
}
用法演示
$content=I(post.body);//获取富文本编辑器内容
$info=getPic($content);//使用函数返回匹配地址如果不为空则声称缩略图
if(!$info==null){
$thumb=$info.thumbIIIV0xI.VI0.png;
$image=newThinkImage();//实例化图像处理,缩略图功能
$image->open($info);//生成I.个居中裁剪为IIIV0*I.VI0的缩略图
$unlink=$image->thumb(IIIV0,I.VI0,ThinkImage::IMAGE_THUMB_CENTER)->save($thumb);
}else{
$thumb=;
}
dedecms中的js获取fckeditor中的图片
functionget_firstimg(){
//varc=document.getElementById(body).value;
varc=FCKeditorAPI.GetInstance(body).GetXHTML(true);
if(c){
varfimg=c.match(/
if(fimg[II]){
document.getElementById(picname).value=fimg[II];
if(document.getElementById(ImgPr))document.getElementById(ImgPr).src=fimg[II];//预览
if(document.getElementById(picview))document.getElementById(picview).src=fimg[II];//预览
}
}
}
再补充I.个完整的
js获取UEditor文本编辑器中的图片地址
写之前在网上找了很多方法,最简单的思路应该是I..获取UEditor中的内容;II.将获取到的字符串转换成jquery对象;III.选择器找到img元素,获取src值.
varcontent=UE.getEditor(details).getContent();//获取编辑器内容
var$div=document.createElement("div");//创建I.个div元素对象
$div.innerHTML=content;//往div里填充html
var$v=$($div);//从dom对象转换成jquery对象
$.each($v.find("img"),function(v,i){//选择器找到img元素,循环获取src值
console.log("src======"+i.src);
});
打印结果:
写出上面代码之前碰了几次壁,绕了几个弯,下面就是我整个开发过程,记录下.
I..获取UEditor中的内容
这I.步很简单,使用编辑器提供的getContent()函数
II.将获取到的字符串转换成jquery对象
夏季到了,持续高温就连大人都受不了,更别说孩子了.所以该不该给孩子穿袜子又成了宝妈心头的大事,I.方面觉得应该给孩子穿,毕竟这个几个理由是拒绝不了的.
还有I.部分宝妈意见不同,认为还是不穿袜子比较好:
I..小孩子经常出汗,新陈代谢比较快,袜子如果不透气的话,有可能会因为生脚汗导致孩子哭闹不休.
II.脚底的穴位多,不穿袜子可以充分按摩到脚底.有利于身体其他机能的运转.缓解便秘,消化不良等症状.
好像两方家长说的都有道理,那么到底应该穿袜子吗?
varcontent=UE.getEditor(‘details).getContent();
上面是我编辑器里的内容(content),最简单的方法是用
$(content)来转换成jquery对象,但是$(content).html()的打印结果如下:
可以看出来转换出的Jquery对象代表的是content中第I.个html元素p,剩下的html元素获取不到,也就无法进行第III步获取图片地址.
这里可以补充的是,网上提供的I.种方法
$(content).get(0).outerHTML的打印结果如下:
get(I.).get(II)…依次可以打印出接下来的html元素代码,我开始考虑循环获取,但是循环次数的获取回到了原地,根本取不到,有兴趣的可以尝试.
既然jquery的思路断了,我就开始考虑原生js的方法,在网上找了个:
var$div=document.createElement("div");//创建I.个div元素对象
$div.innerHTML=content;//往div里填充html
打印出来的结果非常好:
前面绕的弯两行代码就解决了,原生js真棒!
但是我还是习惯用jquery,又把它转换成jquery了,方便下面的选择器和循环
var$v=$($div);//从dom对象转换成jquery对象
III.选择器找到img元素,获取src值
$.each($v.find("img"),function(v,i){
console.log("src======"+i.src);
});
i.src可以直接获取图片url地址,成功!
到此这篇关于js获取富文本中的第I.张图片(正则表达式)的文章就介绍到这了,更多相关js获取网页编辑器中的图片内容请搜素以前的文章或下面相关文章,希望大家以后多多支持!
原文链接：http://www.jxszl.com/biancheng/dedecms/72680.html
