js獲取富文本中的第一張圖片(正則表達(dá)式)
js獲取富文本中的第一張圖片url正則公式及去除字符串里面的html標(biāo)簽
后臺(tái)發(fā)來(lái)一個(gè)富文本字符串里面可能包含了0、1、2、3…個(gè)圖片標(biāo)簽（img）,我們的任務(wù)是獲取這個(gè)字符串里面第一張圖片的url，如果沒(méi)有圖片則返回空
var imgUrlFun = function(str){
var data = '';
str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function (match, capture) {
data = capture;
});
return data
}
去除字符串里面的html標(biāo)簽的正則公式
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里面全部是以文本方式儲(chǔ)存的
UE.getPlainTxt() 可獲取到編輯器中的純文本內(nèi)容，有段落格式
UE.getContentTxt() 可獲取到編輯器中的純文本內(nèi)容，沒(méi)有段落格式；
ueditor 沒(méi)有提供直接獲取圖片的功能，可以UE.getContent() 獲取全部?jī)?nèi)容，使用正則表達(dá)式 篩選出圖片，我提供一個(gè)使用JAVA寫的篩選方法，前臺(tái)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) 為獲得整個(gè)img標(biāo)簽 m_img.group(2) 為獲得src的值
}
可以打開(kāi)ueditor.all.min.js 查看，里面有所有支持的方法 注釋也都很明白
ueditor發(fā)布文章獲取第一張圖片為縮略圖實(shí)現(xiàn)方法
正則匹配圖片地址獲取第一張圖片地址
此為函數(shù) 在模塊或是全局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');//獲取富文本編輯器內(nèi)容
$info=getPic($content);//使用函數(shù) 返回匹配地址 如果不為空則聲稱縮略圖
if(!$info==null){
$thumb=$info.'thumb240x160.png';
$image = new \Think\Image();//實(shí)例化圖像處理，縮略圖功能
$image->open($info);// 生成一個(gè)居中裁剪為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];//預(yù)覽
if(document.getElementById('picview'))document.getElementById('picview').src=fimg[2];//預(yù)覽
}
}
}
再補(bǔ)充一個(gè)完整的
js獲取UEditor文本編輯器中的圖片地址
寫之前在網(wǎng)上找了很多方法，最簡(jiǎn)單的思路應(yīng)該是1.獲取UEditor中的內(nèi)容；2.將獲取到的字符串轉(zhuǎn)換成jquery對(duì)象；3.選擇器找到img元素，獲取src值。
var content= UE.getEditor('details').getContent();//獲取編輯器內(nèi)容
var $div = document.createElement("div");//創(chuàng)建一個(gè)div元素對(duì)象
$div.innerHTML = content;//往div里填充html
var $v = $($div);//從dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
$.each($v.find("img"),function (v,i) {//選擇器找到img元素，循環(huán)獲取src值
console.log("src======"+i.src);
});
打印結(jié)果：
寫出上面代碼之前碰了幾次壁，繞了幾個(gè)彎，下面就是我整個(gè)開(kāi)發(fā)過(guò)程，記錄下。
1.獲取UEditor中的內(nèi)容
這一步很簡(jiǎn)單，使用編輯器提供的getContent()函數(shù)
2.將獲取到的字符串轉(zhuǎn)換成jquery對(duì)象
<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);"> 夏季到了，持續(xù)高溫就連大人都受不了，更別說(shuō)孩子了。所以該不該給孩子穿襪子又成了寶媽心頭的大事，一方面覺(jué)得應(yīng)該給孩子穿，畢竟這個(gè)幾個(gè)理由是拒絕不了的。 </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);"> 還有一部分寶媽意見(jiàn)不同，認(rèn)為還是不穿襪子比較好： </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.小孩子經(jīng)常出汗，新陳代謝比較快，襪子如果不透氣的話，有可能會(huì)因?yàn)樯_汗導(dǎo)致孩子哭鬧不休。 </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.腳底的穴位多，不穿襪子可以充分按摩到腳底。有利于身體其他機(jī)能的運(yùn)轉(zhuǎn)。緩解便秘，消化不良等癥狀。 </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);"> 好像兩方家長(zhǎng)說(shuō)的都有道理，那么到底應(yīng)該穿襪子嗎？ </p>
var content= UE.getEditor(‘details').getContent();
上面是我編輯器里的內(nèi)容（content），最簡(jiǎn)單的方法是用
$(content)來(lái)轉(zhuǎn)換成jquery對(duì)象，但是$(content).html()的打印結(jié)果如下：
可以看出來(lái)轉(zhuǎn)換出的Jquery對(duì)象代表的是content中第一個(gè)html元素p，剩下的html元素獲取不到，也就無(wú)法進(jìn)行第三步獲取圖片地址。
這里可以補(bǔ)充的是，網(wǎng)上提供的一種方法
$(content).get(0).outerHTML的打印結(jié)果如下：
get(1)、get(2)…依次可以打印出接下來(lái)的html元素代碼，我開(kāi)始考慮循環(huán)獲取，但是循環(huán)次數(shù)的獲取回到了原地，根本取不到，有興趣的可以嘗試。
既然jquery的思路斷了，我就開(kāi)始考慮原生js的方法，在網(wǎng)上找了個(gè)：
var $div = document.createElement("div");//創(chuàng)建一個(gè)div元素對(duì)象
$div.innerHTML = content;//往div里填充html
打印出來(lái)的結(jié)果非常好：
前面繞的彎兩行代碼就解決了，原生js真棒！
但是我還是習(xí)慣用jquery，又把它轉(zhuǎn)換成jquery了，方便下面的選擇器和循環(huán)
var $v = $($div);//從dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
3.選擇器找到img元素，獲取src值
$.each($v.find("img"),function (v,i) {
console.log("src======"+i.src);
});
i.src可以直接獲取圖片url地址，成功！
到此這篇關(guān)于js獲取富文本中的第一張圖片(正則表達(dá)式)的文章就介紹到這了,更多相關(guān)js獲取網(wǎng)頁(yè)編輯器中的圖片內(nèi)容請(qǐng)搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
百度編輯器從Json對(duì)象中取值，完成初次渲染，在編輯器內(nèi)畫表格
在百度編輯器中，如何完成從服務(wù)器取值，來(lái)渲染出表格？這里需要先console.log(editor);在官方API中已經(jīng)告訴我們寫入的方法是setContent()，這里只要能傳入我們最終拼好的的字符串，即可以在初始化中，繪制出我們想要的任何節(jié)點(diǎn)2012-06-06
CKEDITOR二次開(kāi)發(fā)之插件開(kāi)發(fā)方法
CKEditor固有的一些文件被組織到_source目錄里. 核心的功能，諸如DOM元素操作，事件處理，初始化腳本和一些環(huán)境設(shè)置被包含在_source\core文件夾內(nèi). 而其它的一些功能, 比如格式化，拷貝和粘貼, 圖片和鏈接, 都被實(shí)現(xiàn)為插件形式放在_source\plugins文件夾內(nèi)2017-03-03
在asp.net中KindEditor編輯器的使用方法小結(jié)
由于國(guó)外的服務(wù)器好象對(duì)一些要引用dll編輯器由于安全問(wèn)題,鎖定了web.config中的一些權(quán)限,在先試了FreeTexbox不行,FCKEditor也不行,因?yàn)槎际且胐ll文件,最后同事介紹一款 純js的kindeditor編輯器,2010-12-12
對(duì)于操作 fckeditor的朋友，有所幫助。其實(shí)我們用插件的方法制作也是不錯(cuò)的。功能可以更強(qiáng)。2009-06-06
CKEditor是新一代的FCKeditor，是一個(gè)重新開(kāi)發(fā)的版本。CKEditor是全球最優(yōu)秀的網(wǎng)頁(yè)在線文字編輯器之一，因其驚人的性能與可擴(kuò)展性而廣泛的被運(yùn)用于各大網(wǎng)站2012-03-03
最新版CKEditor的配置方法及插件(Plugin)編寫示例
本文記錄配置CKEditor過(guò)程，并以文章分頁(yè)插件為例，簡(jiǎn)要CKEditor Plugin編寫過(guò)程。 從官網(wǎng)http://ckeditor.com/download下載最新版CKEditor，解壓2017-03-03
CKeditor與syntaxhighlight打造joomla代碼高亮
最近在用csdn和cnblogs發(fā)帖子和寫隨筆的時(shí)候，發(fā)現(xiàn)了好多的IT的網(wǎng)站或者和代碼有關(guān)系的一些論壇，博客之類，他們都有一個(gè)非常好的語(yǔ)法高亮！很強(qiáng)大！2010-07-07
在使用 UEditor 編輯器 時(shí)遇到了跨域的問(wèn)題，導(dǎo)致無(wú)法發(fā)圖片，原因是由于 iframe 中的 src 跨域造成的2013-06-06
常用網(wǎng)頁(yè)編輯器漏洞手冊(cè)（全面版）fckeditor,ewebeditor
常用網(wǎng)頁(yè)編輯器漏洞手冊(cè)（全面版）fckeditor,ewebeditor,使用這類編輯器的朋友一定要注意下。2011-04-04
解決FCKEditor在IE10、IE11下的不兼容問(wèn)題
今天有編輯反映網(wǎng)站后臺(tái)的網(wǎng)頁(yè)編輯器無(wú)法顯示了，原來(lái)是編輯自己的電腦升級(jí)了ie到IE10或IE11版本，這里特總結(jié)下多種解決方法，需要的朋友可以參考下2014-10-10