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

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

? ? 問題一：使用正則匹配數據

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

?

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

?

?

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

? ? 1.純文本文章：

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

? ? 2.圖文結合的文章：

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

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

?

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

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

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

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

? ? 3.播放優酷視頻：

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

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

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

? ? 4.圖集文章：

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

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

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

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

? ? 做一個陽光的葉葉！

?

轉載于:https://www.cnblogs.com/zhengyeye/p/6123942.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。