? ? 無意中接到了一個小的工作任務(wù)：配合手機(jī)app端的分享功能做一個wap站，簡言之：將手機(jī)app端分享的文章id傳過來，利用此id再進(jìn)行一系列的操作，由于文章分為純文本，圖文以及圖集的三種類型的文章，因此在做這個wap站的時候，就出現(xiàn)了一些小插曲，為了提醒自己以后不再犯類似的錯，特地記錄下來，警示自己也算是給小伙伴們分享一些經(jīng)驗吧……

? ? 前言：其實業(yè)務(wù)邏輯并不是那么的復(fù)雜，只是在這次工作中恰好就是遇到了自己最薄弱的知識點：正則表達(dá)式。由于自己之前就害怕手寫正則表達(dá)式，再加上這里頻繁的使用正則匹配數(shù)據(jù)庫中拿到的數(shù)據(jù)，導(dǎo)致自己的工作進(jìn)度延緩了好多；其次就是沒有搞清楚優(yōu)酷的視頻代碼在app端播放的時候，瀏覽器執(zhí)行的js順序，從而使今天一中午的時間都放在了尋找這個問題的答案上；最后遇到的便是在套用swiper.js插件進(jìn)行圖集文章展示時，沒法使后臺傳過來的數(shù)據(jù)利用template模板渲染到前臺頁面，也就無法很好的使用swiper.js了。下面便是對這三個問題的詳細(xì)描述，以及最終自己是如何處理這些疑難雜癥的。

? ? 問題一：使用正則匹配數(shù)據(jù)

? ? 使用nodejs，利用傳來的id值，一條sql語句便在數(shù)據(jù)庫查出了此id下的文章的所有信息（用data來表示根據(jù)id查出來的所有信息吧），

?

let id = this.get().id;let data = await this.model('article').where({id: id, state: 1}).find();//state=1為正常顯示的文章

?

?

其他的數(shù)據(jù)展示起來都是直接利用模板引擎直接渲染到頁面之上的，而唯獨只有content字段中存的數(shù)據(jù)千奇百怪，要想合理正確的將其展示到頁面上，就必須對此字段中的數(shù)據(jù)進(jìn)行處理，于是就出現(xiàn)了各種正則表達(dá)式匹配content中的內(nèi)容。

? ? 1.純文本文章：

? ? content字段中只有p標(biāo)簽，這樣的數(shù)據(jù)不進(jìn)行任何處理，直接將數(shù)據(jù){{data.content}}渲染到內(nèi)容所要展示的位置即可，app端也可以正常顯示；

? ? 2.圖文結(jié)合的文章：

? ?content字段中不僅有p標(biāo)簽，還有img標(biāo)簽，而問題就在于這個img標(biāo)簽了。一般非網(wǎng)絡(luò)圖片，即本地上傳并存到數(shù)據(jù)庫的圖片，我們默認(rèn)給它存進(jìn)數(shù)據(jù)庫的結(jié)構(gòu)都是'image/20161201123'這樣的形式，但是在頁面展示時，想要正確讓它顯示就必須在這路徑之前加上圖片顯示的域名，比如'http://www.baidu.com',而這個顯示的域名最開始是寫在config文件中的，于是最終只是需要this.config('imgSiteUrl')便可以獲取到這個域名，但問題關(guān)鍵就在于我要找出數(shù)據(jù)庫content字段中所有的的img標(biāo)簽，并將每一個img標(biāo)簽中的src屬性值全都替換為其前加上圖片顯示域名，就是這個如何匹配所有的img標(biāo)簽，困惑了自己足夠長的時間。在網(wǎng)上搜羅到了很多相關(guān)的文章，但是基本都是治標(biāo)不治本的套路，對于自己來說根本就用不到那些東西，而需要自己手寫正則，卻又是那么的困難，直到經(jīng)過DX大神的指導(dǎo)，才發(fā)現(xiàn)匹配img標(biāo)簽原來是so easy ，

let reg = new RegExp("<img.+?src=\"(.+?)\".*/>", "");//匹配是否含有img標(biāo)簽 let reg = new RegExp("<img.+?src=\"(.+?)\".*/>", "");//匹配是否含有img標(biāo)簽let flag = reg.test(str);if (flag) {//含有img標(biāo)簽str = str.replace(/<img[\s]*src=\"image/g, "<img src=\"" + this.config('imgSiteUrl') + "image");data.content = str;}

?

總而言之就是自己想太多，反而把一件簡單的事情做的那么復(fù)雜，到最終也都是沒有做出來……

套用DX大神的說法：他寫的正則表達(dá)式，完全屬于耍流氓的寫法，而他一直則堅信：今天的工作想方設(shè)法都要完成，絕不拖拉，即使使用的技術(shù)是多么的‘無恥下流’，總之實現(xiàn)效果就可以按時回家睡覺了，至于他的這種超簡單但是行之有效的正則寫法，他說如果我們的大boss看見，絕對會損他，但是我依舊很佩服他那種信手拈來的魄力。

這樣匹配到img標(biāo)簽，并成功的將img標(biāo)簽中的src屬性值替換成了前面加上圖片顯示域名的地址，這樣再把{{data.content}}渲染出來，便可出現(xiàn)正確的圖文展示形式。

實現(xiàn)思路：用正則匹配出content字段中所有的含有src屬性的img標(biāo)簽，并利用.replace('正則表達(dá)式','替換后的值')，然后在進(jìn)行渲染頁面。

? ? 3.播放優(yōu)酷視頻：

? ? 這是一種屬于普通文章的一類文章，其中也有p標(biāo)簽，img標(biāo)簽，但是多了一段js代碼，也就是多了幾個script標(biāo)簽。所要完成的工作就是將img標(biāo)簽中的src屬性前面加上圖片顯示域名，并將那段優(yōu)酷的js視頻代碼處理一下，使其正確顯示在頁面之上。對于這個問題，從中午十點多一直到12點午飯，MB大神和我找了這么長時間，最終居然只寫了一句代碼，就是將優(yōu)酷的視頻代碼中的一個script在頁面加載完畢之后仔重新執(zhí)行以便即可。

let scriptArr = str.match(/<script type="text\/javascript">.*<\/script>/g);if (scriptArr && scriptArr.length > 0) {data['scripts'] = scriptArr[0]//將播放優(yōu)酷視頻的js代碼取出來然后在頁面中再執(zhí)行一次}

而對于這個js執(zhí)行問題，自己之前也是一知半解，只知道有這么一回事，但是也從來沒有仔細(xì)研究過，于是今天就把自己給坑了，對于這個教訓(xùn)，以后就該銘記了！

? ? 4.圖集文章：

? ? 類似于網(wǎng)易,騰訊新聞經(jīng)常看到了圖片+文字描述的那類文章。其實在套用swiper.js插件的時候，只要將數(shù)據(jù)循環(huán)正確，頁面便會自動將N多張圖片顯示到頁面上，并附帶上左右滑動的效果，但是不巧的是，我們數(shù)據(jù)是一張圖附一個描述，在用戶進(jìn)行圖片左右切換的時候，圖片+文字都得對應(yīng)改變，而在頁面上套用的模板卻是將文章的標(biāo)題和描述放在一起（--------------------------這里寫html代碼，，明天去了再寫），而開始的時候，自己想的是將data.content循環(huán)一遍，取出它的value.desc，然后賦值給顯示描述的這個p標(biāo)簽，但是不妙的是，我要是這樣循環(huán)的話，頁面中就會出現(xiàn)N多個p標(biāo)簽，而這些描述信息就會全部填滿整個頁面，在左右滑動圖片的時候，相對應(yīng)的描述也不會隨著圖片變換而顯示。于是在參考之前CZ大神用device寫app時候的思路，就一門心思的盯著swiper插件找各種方法，于是就找到了onInit以及onSlideChangeEnd兩個方法，通過它本身自帶的這種方法，成功的獲得了每張圖片滑動過去的index，這樣跟顯示描述的角標(biāo)剛好是同一個值，本以為這樣就可以完美的顯示每張圖片相對應(yīng)的描述了，只是最后還是出現(xiàn)了一個‘靈異事件’——從后臺怎么也不能把data.content的值渲染出出來，而之前屢試不爽的{{data.content}}這次也一直獲取到的是空的值，----------------------這個問題，到現(xiàn)在我也不知道是因為什么，而最終在老大的指導(dǎo)下，是重新將data.content賦值給另外一個變量，這樣便成功的在頁面上渲染出了此content值。---------------自己研究的結(jié)果：

昨天的那個在javascript標(biāo)簽中不顯示的原因是：在art-template模板引擎中，可以將對象數(shù)組直接渲染到html頁面（遍歷取值就行），但是不支持直接渲染到<script></script>標(biāo)簽中，script中只接受string類型的數(shù)據(jù)，昨天的contentTemp在后臺的時候，被JSON.parse()了，變成了object，這樣子模板引擎就不支持了。。。。。。。。。

? ? 實現(xiàn)思路：利用swiper插件本身的方法，獲取到相對應(yīng)圖片的index值，再將content.desc[index]取出來塞到content顯示的那個位置即可成功實現(xiàn)圖片+相對應(yīng)文字隨意切換的效果。

? ? 想起來很簡單的wap站，居然被自己用了兩天時間做完，而且還是在那么多大神同事的指點下完成的，瞬間有點感覺對不住大家，其實回頭想來這些都不難，只是自己不足的地方實在太多，而這份小工作恰好就把這些問題全集中在了一起，希望自己以后遇見類似的問題，知道怎么處理，盡量少打擾大神同事們~~~

? ? 做一個陽光的葉葉！

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhengyeye/p/6123942.html

總結(jié)

以上是生活随笔為你收集整理的app——分享wap站，数据处理页面展示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。