介紹

大家好，我是清風。今天給大家分享一個項目中遇到問題解決問題的案例，編程其實就是一個思考的過程，缺少思考就沒有靈魂，遇到問題先靜下心去思考，想到方法后再去實踐。我們要學會靈活變通去解決問題，掌握方法，這樣才能舉一反三，臨危不亂，遇到所有問題都能很好地去解決。

事情是這樣的，做的一個答題小程序，要求在后臺編輯題目，編輯題目是用的textarea文本域，即輸入的是文本內容，配置之后小程序里查詢顯示后臺配置的題目列表。

當然在測試時后臺去配置文本內容，小程序顯示是沒有問題的。因為配置的題目是純文本，小程序里也是直接在text里顯示的，沒有問題。

后臺配置題目

小程序顯示題目

問題出現

問題往往只有在用的時候才會發現，用戶或管理員的各種操作才能顯現出各種問題。現在小程序里已經不能正常顯示了，有些顯示的是html格式富文本格式，有些不顯示。顯然和需求大相徑庭，已經出現問題了。

問題分析

如上圖，在用的時候因為是從word文檔里直接復制過去的題目（事先在word里整理好了題目，由于各部門工作對接，先是在word文檔進行審核），直接復制會把富文本內容也攜帶過去，攜帶過去的當然也有style樣式，小程序里不顯示的原因是富文本的字體顏色是黑色字體，和小程序面背景都是黑色，導致看不到文字。打開控制臺調試，問題確實是這么出現的。

word文檔編輯的題目會出現不同的富文本的樣式格式，這都會導致小程序的不正常顯示。

富文本的文字顏色是黑色，這導致的小程序頁里題目的不顯示。

解決方法

既然后臺有可能出現富文本，我們直接把小程序題目的渲染方式換成富文本渲染，這樣就算是純文本也可以顯示的。而第二個問題，由于小程序頁面背景顏色是黑色，所以題目的字體顏色不能是黑色，我們做一個查找替換，把style樣式里的字體樣式替換掉就可以了。

優化

樣式可能是各種各樣的，通過查找style樣式里的字體樣式考慮的匹配太多了，比如說color屬性值可以是rgb形式，也可是rgba形式，也可能是#號顏色值形式，還有可能是英文形式顏色，所以不可取。我們換一種思路，直接把style屬性替換掉，即查找到style，換成一個無效的屬性名。案例中我們替換成了c，c是一個無效的屬性，不會觸發節點的查找和計算。

replace函數

我們用到replace函數，replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

參數

1. regexp/substr，必需。規定子字符串或要替換的模式的 RegExp 對象。
2. replacement，必需。一個字符串值。規定了替換文本或生成替換文本的函數。

請注意，regexp/substr 是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp對象，返回值是一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

實現

replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

 that.setData({
          _list: res.data
        })
        let data = that.data._list
        data.forEach((element, index) => {
          var stemContent = '_list[' + index + '].stemContent'
          that.setData({
            [stemContent]: element.stemContent.replace(/style/g, 'c')
          })
          element.choiceTopicVos.forEach((item, i) => {
            var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
            that.setData({
              [listCheck]:  item.optionDes.replace(/style/g, 'c')

            })
          })
        })  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

用到的replace函數，進行了字符串的查找替換，查找到style屬性，把它替換到了無效的屬性c，沒有了樣式屬性，從而達到了去除內聯樣式的效果，經過調試，完美解決問題。

總結

這是一個小問題，我為什么要拿出來說呢？拋去開發的測試流程不說，我認為它能引發一些思考。寫代碼的過程必須是一個思考的過程，怎么樣更好地去實現效果，怎么樣更簡單有效地解決問題，怎么樣優化，要去考慮一個大的方面。善于發現問題，解決問題，并不是說用了什么高級語言就鄙棄了思考，機器語言是相通的，開發中各種各樣地應用才是魅力所在。編程是一門是藝術，最重要的是你怎樣去巧妙地運用，就像解一道數學題，精絕巧妙的解法會讓人眼前一亮，增色太多。同樣都做出來了，但是你做的就顯得十分優雅！

轉自 csdn

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司