js获取富文本中的第一张图片(正则表达式)_网页编辑器

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

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

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

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

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里面全部是以文本方式储存的

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获取网页编辑器中的图片内容请搜素真格学网以前的文章或下面相关文章,希望大家以后多多支持真格学网!

您可能感兴趣的文章:指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)指定位置如果有图片显示图片,无图片显示广告的JSjavascript 指定区域内图片等比例缩放实现代码 真格学网整合版js获取UEditor富文本编辑器中的图片地址JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析原生js实现点击轮播切换图片使用PreloadJS加载图片资源的基础方法详解Javascript如何实现双指控制图片功能

  • 本文相关:
  • 宝丽通实现连续播放实现代码
  • fckeditor编辑器下的自定义分页符实现方法
  • fckeditor smarty 编辑器的应用php
  • 百度编辑器 ueditor 内容编辑自动套p标签,及p标签 替换
  • 百度编辑器从json对象中取值,完成初次渲染,在编辑器内画表格
  • 针对php环境下fckeditor编辑器上传图片配置详细教程
  • syntaxhighlighter配合ckeditor插件轻松打造代码语法着色
  • fckeditor asp.net 上传附件研究
  • fck 编辑器焦点问题
  • fckeditor 在chrome中不显示问题
  • 用js获取datalist里面绑定的图片名称,为什么只能获取第一张图...
  • js获得一个文本框中的值复制到另一个中应如何改
  • js取得文本域中的值
  • 网页设计:如何用JS获取文本框中的数值并把他们相加并求平均...
  • js或jquery 获取指定div id下的所有img图片,并alert出第一张图片...
  • 有没有适合angular js的富文本编辑器?可以自定义控件
  • js百度富文本编辑器能做什么用
  • 在js中怎么获得text文本框中的值变化了
  • 单击图片,在js里获取图片的地址,并在文本框中显示
  • 单击图片,在js里获取图片的地址,并在文本框中显示
  • 如何利用js获取下面这个数据中的图片地址
  • js中如何获取td标签中的文本...在线等到[高分求问]
  • FireFox document.execCommand javascript 浏览器js支持问题...
  • c#.net,js问题,富文本编辑器取值问题,'document.getElementById...
  • fckeditor.js富文本编译器怎么隐藏掉
  • swiper.js 插件 怎么实现点击按钮返回第一张图片
  • ate-web.js为什么不解析富文本?
  • JS轮播图片,除第一张图层外怎么把其它几张变成灰色的
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)指定位置如果有图片显示图片,无图片显示广告的jsjs获取ueditor富文本编辑器中的图片地址js+html实现自定义上传图片按钮并显示图片功能的方法分析原生js实现点击轮播切换图片使用preloadjs加载图片资源的基础方法详解javascript如何实现双指控制图片功能宝丽通实现连续播放实现代码fckeditor编辑器下的自定义分页符实现方法fckeditor smarty 编辑器的应用php百度编辑器 ueditor 内容编辑自动套p标签,及p标签 替换百度编辑器从json对象中取值,完成初次渲染,在编辑器内画表格针对php环境下fckeditor编辑器上传图片配置详细教程syntaxhighlighter配合ckeditor插件轻松打造代码语法着色fckeditor asp.net 上传附件研究fck 编辑器焦点问题fckeditor 在chrome中不显示问题19款javascript富文本网页编辑器免费开源百度编辑器(ueditor)使用方法ewebeditor 辑器按钮失效 ie8下ewebeditckeditor/fckeditor 使用 ckeditor彻底解决ewebeditor网站后台不能上传图片的方法javascript 在线文本编辑器实现代码解决fckeditor在ie10、ie11下的不兼容问题asp.net+fckeditor上传图片显示叉叉图片无法显页面嵌入windows media player播放器代码需ueditor编辑器自定义上传图片或文件路径的修改方法比较不错的修改fckeditor的修改方法ie8 fckedit2.6.x不兼容fckeditor 2.0 简化和使用fckeditor在php中的用法(添加于修改写成了函数)ewebeditor 文件上传问题ueditor编辑器不能上传图片问题的解决方法kindsoft在线网页编辑器简单的配置参数介绍fckeditor 编辑器插入代码功能实现步骤fckeditor v2.6 编辑器配置图解教程fckeditor 相关函数介绍
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved