js獲取富文本中的第一張圖片(正則表達式)_網頁編輯器

來源:腳本之家  責任編輯:小易  

自己也在找這個,找到了;卮鹨幌陆o后面需要的人。代碼放入html,用手機打開頁面,即可看出效果。如果需要和題主一樣的效果,自己封裝下,點擊定位時,調用就好了。function Location(){};Location.prototype.getLocation=function(callback){var options={enableHighAccuracy:true,maximumAge:1000};this.callback=Object.prototype.toString.call(callback)="[object Function]?callback:function(address){alert(address.province+address.city);console.log("getocation(callbackFunction)可獲得定位信息對象");};var self=this;if(navigator.geolocation){瀏覽器支持geolocationnavigator.geolocation.getCurrentPosition(function(position){經度var longitude=position.coords.longitude;緯度var latitude=position.coords.latitude;self.loadMapApi(longitude,latitude);},self.onError,options);} else {瀏覽器不支持geolocation}};Location.prototype.loadMapApi=function(longitude,latitude){var self=this;var oHead=document.getElementsByTagName('HEAD').item(0);var oScript=document.createElement("script");oScript.type="text/javascript;oScript.src="http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";oHead.appendChild(oScript);oScript.onload=function(date){var point=new BMap.Point(longitude,latitude);var gc=new BMap.Geocoder();gc.getLocation(point,function(rs){var addComp=rs.addressComponents;self.callback(addComp);});}};Location.prototype.onError=function(error){switch(error.code){case 1:alert("位置服務被拒絕");break;case 2:alert("暫時獲取不到位置信息");break;case 3:alert("獲取信息超時");break;case 4:alert("未知錯誤");break;}};調用var local=new Location();local.getLocation(function(res){此處就是返回的地理位置信息console.log(res);JSON.stringify(res),把返回的對象轉為字符串了,自己根據需求截取下就好var resstr=JSON.stringify(res);alert(resstr);});www.anxorj.tw防采集請勿采集本網。

 js獲取富文本中的第一張圖片url正則公式及去除字符串里面的html標簽

把圖片里的文本和表格提取出來的步驟如下: 1.在微信的發現頁面中,點擊“小程序”菜單項。2.接著就會打開小程序主界面,點擊右上角的“搜索”按鈕。3.在搜索框中輸入“微軟小蜜”進行搜索,在

后臺發來一個富文本字符串里面可能包含了0、1、2、3…個圖片標簽(img),我們的任務是獲取這個字符串里面第一張圖片的url,如果沒有圖片則返回空

js\"> 設置css樣式 abc{ width:500px;height:500px;background:url('2.jpg');position:relative;} abc img{ position:absolute;bottom:0px;right:0

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

在upImg()函數的最后一行加上:upImg();就是再調用一次自己。否則,你新添加的html中的事情是監聽不到的。

去除字符串里面的html標簽的正則公式

JS不可以跨域的 你可以用服務器來獲取網頁的源代碼 在用JS來提取相應的值 不過你可以直接在服務器里全部完成的。什么ASP 了.NET了 PHP了 都可以獲取一個網站的源代碼 你上網搜索下吧 以前做過 沒

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里填充htmlvar $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獲取網頁編輯器中的圖片內容請搜素真格學網以前的文章或下面相關文章,希望大家以后多多支持真格學網!

看看就知道具體是什么原因代碼,可能有以下幾點:運行后,頁面加載完成后1.js最好的方法,它可能不會被加載,這樣的元素不能被發現。2使用document.all。要拍攝的元素,有些瀏覽器不支持3通過元素的ID來取,但在相同的元素ID的頁面存在內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 指定區域的圖片自動按比例縮小的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 實現圖片的上傳
  • 如何用js實現圖片與文本框在同一行
  • 手機js頁面實現一鍵定位,并且把獲取的地理位置顯示到文本框中,如下圖,100分
  • javascript獲取頁面第一張圖片的方法是什么?我忘記了~~~就是在不知道id和name的情況下獲取第一張圖片的src
  • 如何提取圖片中的文字?
  • 怎么把圖片里的文本和表格提取出來
  • JS怎么把一張圖片隱藏在另一整張圖片的一部分里,點擊后會展開或者彈出,然后可以在這張圖片選擇連接?
  • js 點擊上傳圖片 就增加一行 并且文本框里顯示路徑 第一次好使第二次不好使怎么改
  • JS獲取不同站點的文本框中的值
  • 如何把圖片轉化成文本格式?
  • js如何獲取下拉框選中項的文本?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁網頁編輯器指定區域的圖片自動按比例縮小的js代碼(防止頁面被圖片撐破)指定位置如果有圖片顯示圖片,無圖片顯示廣告的jsjs獲取ueditor富文本編輯器中的圖片地址js+html實現自定義上傳圖片按鈕并顯示圖片功能的方法分析原生js實現點擊輪播切換圖片使用preloadjs加載圖片資源的基礎方法詳解javascript如何實現雙指控制圖片功能fckeditor 圖片上傳進度條不動的解決方法在kindeditor中獲取當前光標的位置索引的實現代碼針對php環境下fckeditor編輯器上傳圖片配置詳細教程ueditor百度編輯器的html模式自動替換樣式的解決方法百度ueditor修改右下角統計字數包含html樣式ckeditor中加入syntaxhighlighter代碼高亮插件kindsoft在線網頁編輯器簡單的配置參數介紹fckeditor 和 syntaxhighlighter 代碼高亮插件的整合javascript開發隨筆3 開發iframe富文本編輯器的一點體會配置fckeditor 實現圖片的上傳19款javascript富文本網頁編輯器免費開源百度編輯器(ueditor)使用ewebeditor 輯器按鈕失效 ie8下eckeditor/fckeditor 使用 ckedit徹底解決ewebeditor網站后臺不能解決fckeditor在ie10、ie11下的不javascript 在線文本編輯器實現代asp.net+fckeditor上傳圖片顯示叉修改fckeditor的文件上傳功能步驟頁面嵌入windows media player播javascript 獲取fckeditor內容cuteeditor 編輯器的字體樣式無法控制的解ewebeditor_v280_free_final最好用的網頁網頁編輯器fckeditor 2.6.4精簡配置方法ewebeditor及fckeditork單引號問題的解決fckeditor 網頁在線編輯器的使用方法ckeditor和ueditor那個好 ckeditor和uediueditor編輯器不能上傳圖片問題的解決方法自動刷新從browsersync開始tinymce syntaxhl插入代碼后換行的修改方
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载