js获取富文本中的第一张图片(正则表达式)

来源:脚本之家  责任编辑:小易  

var imags = document.getElementsByTagName('img

 js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签

(?<=(src="))[^"]*?(?=")这个正则可以取出来

后台发来一个富文本字符串里面可能包含了0、1、2、3…个图片标签(img),我们的任务是获取这个字符串里面第一张图片的url,如果没有图片则返回空

实现的效果:在字符串中abcdefgname='test'sddfhskshjsfs

var imgUrlFun = function(str){ var data = ''; str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function (match, capture) { data = capture; }); return data }

var str = "BEGIN CONST a,b=10,c END IF a>1

去除字符串里面的html标签的正则公式

var str="caom.cooocomooo.m";var newStr=s

var filterHTMLTag = function (str) { str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白 str=str.replace(/ /ig,'');//去掉 return str; }

我并不觉得很丢脸,虽然说,对于一些现代人来说,第一次不论是坐飞机还是乘火车等等,去查一些必要得信息和要求是很正常的,我们已经习惯了互联网的使用,但是,如果没有做到,不知道要买票,有什么好丢脸的呢?想起这件事在网上传播开之后,很多网友指责父母有意带着孩子逃飞机票,我才觉得气愤,有点常识的人都知道飞机票不能逃票,那么为什么却要怀揣着恶意的心思去揣度他人呢?其实在信息时代,知识飞速发展的今天,我们这些人还能有机会做键盘侠,去指责和鄙视别人的无知,别人的落后,那么想想,我们的父母,有没有不会用互联网的?不会手机支付的?我们有没有不耐烦反复去教爸爸妈妈用新科技产品时,他们怎么也学不会?当我们老了,我们也

js如何获取ueditor里面的第一张图片

这个问题一目了然了呀,肯定自己带孩子好呀,因为那是你的孩子,不是给老人生的孩子。现在很多家庭让老人来带孩子或者把孩子放在老人身边,那多数都是因为工作忙碌无暇顾及,也有很少数是做父母嫌累吧如果情况允许,还是自己带孩子,因为老人并没有那么多的耐心和经历来给孩子好的教育,养孩子并不是吃饱穿暖就没事了,现在的孩子都注重要有好的教养。

想获取ueditor里面第一张图片作为缩略图,怎么获取,ueditor里面全部是以文本方式储存的

网络配图  五六百人“淘宝”每天只睡三小时  中国江西网记者了解到,银元发现的地点为赣县长洛乡长源村下西山组,“当知道这儿有银元之后,人们的状态可以用‘癫狂’来形容,每晚都挖到凌晨2点,早上5点又举着手电筒来继续挖。”  甚至,有赣州市及附近过往群众都纷纷加入了“淘宝”队伍,从9日发现银元以来,没日没夜共挖了四、五天,“地下都挖得很深。”  长洛乡副乡长刘江向中国江西网记者介绍,参与到“淘宝”中的有五六百人之多。“我们怕哄抢会出现安全事故,紧急联系了派出所民警在现场维持秩序,所幸在这过程中没有出现打架斗殴恶性事件。”  村民迄今已挖出236枚“袁大头”  “经过粗略、保守统计,一共挖出236枚

UE.getPlainTxt() 可获取到编辑器中的纯文本内容,有段落格式

这是营销手段,你要相信了你就傻*了,原来你有听说过吗?,哪天跟你说,锡罐茶,紫砂壶茶,包装下,再弄个紫砂壶大师,锡罐制作大师,再给你讲个故事,然后请几个所谓的营养专家,五十块钱一两的茶,卖到你手里就是五百甚至更高,就看故事怎么讲,套路怎么玩

UE.getContentTxt() 可获取到编辑器中的纯文本内容,没有段落格式;

ueditor 没有提供直接获取图片的功能,可以UE.getContent() 获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:

Pattern p_img = Pattern.compile("(]+src\s*=\s*'\"['\"][^>]*>)"); Matcher m_img = p_img.matcher(content); while (m_img.find()) { String img = m_img.group(1); //m_img.group(1) 为获得整个img标签 m_img.group(2) 为获得src的值 }

可以打开ueditor.all.min.js 查看,里面有所有支持的方法 注释也都很明白

ueditor发布文章获取第一张图片为缩略图实现方法

正则匹配图片地址获取第一张图片地址

此为函数 在模块或是全局Common文件夹中的function.php中

/** * [getPic description] * 获取文本中首张图片地址 * @param [type] $content [description] * @return [type] [description] */ function getPic($content){ if(preg_match_all("/(src)=([\"|']?)([^ \"'>]+\.(gif|jpg|jpeg|bmp|png))\\2/i", $content, $matches)) { $str=$matches[3][0]; if (preg_match('/\/Uploads\/images/', $str)) { return $str1=substr($str,7); } } }

用法演示

$content=I('post.body');//获取富文本编辑器内容 $info=getPic($content);//使用函数 返回匹配地址 如果不为空则声称缩略图 if(!$info==null){ $thumb=$info.'thumb240x160.png'; $image = new \Think\Image();//实例化图像处理,缩略图功能 $image->open($info);// 生成一个居中裁剪为240*160的缩略图 $unlink=$image->thumb(240, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($thumb); }else{ $thumb=''; }

dedecms中的js获取fckeditor中的图片

function get_firstimg(){ //var c=document.getElementById('body').value; var c=FCKeditorAPI.GetInstance('body').GetXHTML(true); if(c){ var fimg=c.match(/<img(.*?) src=["|'](.*?)["|'](.*?)>/); if(fimg[2]){ document.getElementById('picname').value=fimg[2]; if(document.getElementById('ImgPr'))document.getElementById('ImgPr').src=fimg[2];//预览 if(document.getElementById('picview'))document.getElementById('picview').src=fimg[2];//预览 } } }

再补充一个完整的

js获取UEditor文本编辑器中的图片地址

写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容;2.将获取到的字符串转换成jquery对象;3.选择器找到img元素,获取src值。

var content= UE.getEditor('details').getContent();//获取编辑器内容 var $div = document.createElement("div");//创建一个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); });

打印结果:

写出上面代码之前碰了几次壁,绕了几个弯,下面就是我整个开发过程,记录下。

1.获取UEditor中的内容

这一步很简单,使用编辑器提供的getContent()函数

2.将获取到的字符串转换成jquery对象

<p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 夏季到了,持续高温就连大人都受不了,更别说孩子了。所以该不该给孩子穿袜子又成了宝妈心头的大事,一方面觉得应该给孩子穿,毕竟这个几个理由是拒绝不了的。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255); text-align: center;"> <img alt="1.jpg" width="490" height="306" src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg" _src="http://www.socksb2b.com/d/file/zixun/wazichangshi/2019-07-05/1b0038e6cf808ae9c091c34ded031de9.jpg"> </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 还有一部分宝妈意见不同,认为还是不穿袜子比较好: </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 1.小孩子经常出汗,新陈代谢比较快,袜子如果不透气的话,有可能会因为生脚汗导致孩子哭闹不休。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 2.脚底的穴位多,不穿袜子可以充分按摩到脚底。有利于身体其他机能的运转。缓解便秘,消化不良等症状。 </p> <p style="margin-top: 1em; margin-bottom: 1em; white-space: normal; box-sizing: border-box; padding: 0px; border: 0px; vertical-align: middle; line-height: 25px; list-style: none; color: rgb(58, 58, 58); font-family: 微软雅黑, 宋体, Verdana, Arial, Helvetica, sans-serif; font-size: 14px; background-color: rgb(247, 253, 255);"> 好像两方家长说的都有道理,那么到底应该穿袜子吗? </p>

var content= UE.getEditor(‘details').getContent();

上面是我编辑器里的内容(content),最简单的方法是用

$(content)来转换成jquery对象,但是$(content).html()的打印结果如下:

可以看出来转换出的Jquery对象代表的是content中第一个html元素p,剩下的html元素获取不到,也就无法进行第三步获取图片地址。

这里可以补充的是,网上提供的一种方法

$(content).get(0).outerHTML的打印结果如下:

get(1)、get(2)…依次可以打印出接下来的html元素代码,我开始考虑循环获取,但是循环次数的获取回到了原地,根本取不到,有兴趣的可以尝试。

既然jquery的思路断了,我就开始考虑原生js的方法,在网上找了个:

var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html

打印出来的结果非常好:

前面绕的弯两行代码就解决了,原生js真棒!

但是我还是习惯用jquery,又把它转换成jquery了,方便下面的选择器和循环

var $v = $($div);//从dom对象转换成jquery对象

3.选择器找到img元素,获取src值

$.each($v.find("img"),function (v,i) { console.log("src======"+i.src); });

i.src可以直接获取图片url地址,成功!

到此这篇关于js获取富文本中的第一张图片(正则表达式)的文章就介绍到这了,更多相关js获取网页编辑器中的图片内容请搜素脚本之家以前的文章或下面相关文章,希望大家以后多多支持脚本之家!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字,图片内容

UE.getPlainTxt() 可获取到编辑器中的纯文本内容,有段落格式

UE.getContentTxt() 可获取到编辑器中的纯文本内容,没有段落格式;

ueditor 没有提供直接获取图片的功能,可以UE.getContent() 获取全部内容,使用正则表达式 筛选出图片,我提供一个使用JAVA写的筛选方法,前台js代码类似:Pattern p_img = Pattern.compile("(<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>)");

Matcher m_img = p_img.matcher(content);

while (m_img.find()) {

    String img = m_img.group(1); //m_img.group(1) 为获得整个img标签  m_img.group(2) 为获得src的值

    }

可以打开ueditor.all.min.js 查看,里面有所有支持的方法  注释也都很明白

js正则表达式获取图片名称

var img = document.getElementsByTagName('img')[0];

// 注意,我使用了\w 来匹配图片名,表示匹配[A-Za-z0-9_]之内的字符都能被匹配到

// 另外最后我使用一个表达式来限定只匹配图片后缀

console.log(img.src.match(/\/(\w+\.(?:png|jpg|gif|bmp))$/i)[1]);

JS如何用正则表达式 获取字符串内的匹配部份?

实现的效果:在字符串中abcdefgname='test'sddfhskshjsfsjdfps中获取name的值test 

实现的机制:通过replace的回调函数获取。

可以通过下面的代码获取匹配部分

var str = "abcdefgname='test'sddfhskshjsfsjdfps";

var reg = /name='((\w|-|\s)+)/ig; 

str.replace(reg, function() { 

console.log(arguments.length); //5 

console.log(arguments[1]);//test 

});

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。

获取html字符串图片路径正则表达式

var s="<div><img height=\"768\" alt=\"\" src=\"/vote/uploads/027711.jpg\" width=\"510\" border=\"0\" /></div>\r\n<div><img height=\"454\" alt=\"\" src=\"/vote/uploads/marry.jpg\" width=\"375\" border=\"0\" /></div>";

var re=/src="([^"]*)"/g;

while(arr=re.exec(s)){

document.writeln(arr[1])

}

这样就可以了

怎么用正则表达式获取 图片路径中的一部分

代码测试如下: //获取Src内容

string StrPage = @" 你的字符串。。";

Regex re = new Regex("<img( ||.*?)src=('|\"|)([^\"|^\']+)('|\"|>| )", RegexOptions.IgnoreCase);

MatchCollection matches = re.Matches(StrPage);

string _tmpImageUrl = "";

foreach (Match mh in matches)

{

_tmpImageUrl = mh.Groups[3].Value;//src里面的路径

}。。。。。。。。。。。。测试结果:tmpImageUrl = /project/userfiles/image/ppt1.jpg

  • 本文相关:
  • 指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
  • 指定位置如果有图片显示图片,无图片显示广告的js
  • javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
  • js获取ueditor富文本编辑器中的图片地址
  • js+html实现自定义上传图片按钮并显示图片功能的方法分析
  • 原生js实现点击轮播切换图片
  • 使用preloadjs加载图片资源的基础方法详解
  • javascript如何实现双指控制图片功能
  • fckeditor 图片上传进度条不动的解决方法
  • 在kindeditor中获取当前光标的位置索引的实现代码
  • 针对php环境下fckeditor编辑器上传图片配置详细教程
  • ueditor百度编辑器的html模式自动替换样式的解决方法
  • 百度ueditor修改右下角统计字数包含html样式
  • ckeditor中加入syntaxhighlighter代码高亮插件
  • kindsoft在线网页编辑器简单的配置参数介绍
  • fckeditor 和 syntaxhighlighter 代码高亮插件的整合
  • javascript开发随笔3 开发iframe富文本编辑器的一点体会
  • 配置fckeditor 实现图片的上传
  • 前端用jQuery怎么获取到富文本ueditor web编辑器里面的文字,图片内容
  • js正则表达式获取图片名称
  • JS如何用正则表达式 获取字符串内的匹配部份?
  • 获取html字符串图片路径正则表达式
  • 怎么用正则表达式获取 图片路径中的一部分
  • js正则获取字符串中所有图片名称
  • 求一个获取字符串中所有src路径的正则表达式
  • JS如何用正则表达式获取字符串内的匹配部份?
  • js 正则表达式提取某一段字符
  • 在js中的正则表达式,如何用图片里的方法实现图片里的结果
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved