## 搜索關鍵字的顯示處理  > 其實很多人都忽視了這個問題，不信你到一些網站上搜索 `'`、`"`、`\`試一下，看看會不會出現驚喜和意外。 頁面中顯示搜索詞有兩種方式： 1. 用js設置填充數據。 2. 直接渲染在標簽中。 但這兩種方式都要面臨一個問題，**那就是用戶輸入的特殊詞不能引起我們頁面錯誤，html和JavaScript代碼不能夠受其影響而出錯。** 如何在不限制用戶輸入特殊詞的情況下，滿足這個要求呢？ 下面我們就來探討一下這個問題。 如何解決用戶搜索特殊詞時，顯示沒有問題，搜索框中顯示也沒有問題，**不能引起html結構和js代碼出錯**。搜什么顯示什么，**并且再次點擊搜索按鈕時，搜索的還是當前的詞。** * * * * * 最簡單的模糊搜索就是這樣了 ```php // 不用過濾，不用進行任何處理（只是清除左右的空格符） $keyword = trim($request->param('keyword/s')); // 畢竟不用拼接sql，所以不會有任何安全問題 $where[$field] = ['like', '%' . $keyword . '%']; ``` 得益于現代ORM和PDO的完善和普及，讓我們不再有拼接sql字符串的風險問題了，因為我們不需要直接拼接sql了，所以不用在進行任何過濾等處理就可以直接查詢，但是用戶搜索的特殊字符在頁面上顯示時怎么處理呢？比如搜索框中，頁面上等，很多人都忽略了這個問題，但凡細心一點的人，稍加測試就能發現端倪，下面就來看一下： ```html <!-- 搜索框中顯示搜索詞 --> <input name="q" type="text" placeholder="搜索：課程" value="" autocomplete="on"> <!-- 頁面顯示搜索詞 --> <span class="search-keyword">"{:getQ(1)}"</span>&nbsp;&nbsp;的搜索結果 ``` ```javascript // 用js來設置搜索框的value $('.input-text').val("{:getQ(2)}"); ``` js設置時就不會出現引號和html沖突了（因為將沖突可能性轉移到了js中嘛），**并且這樣直接搜索時所見即所得，顯示詞即為搜索詞。** ```php // 獲取搜索詞 function getQ($mode = 0) { $request = Request::instance(); $q = $request->param('q/s', ''); // 默認不做任何處理直接返回 if ($mode == 1) { // html實體轉義 // html中使用 $q = htmlspecialchars($q, ENT_QUOTES); } elseif ($mode == 2) { // 單引號（'）雙引號（"）反斜杠（\）NULL 之前添加反斜杠 // JS中使用 $q = addslashes($q); } return $q; } ``` ### 用表單插值插件處理的搜索詞 ```php // 關鍵字搜索（后端只是去除左右多余空格符，并不會對其進行任何處理） $keyword = trim($request->param('keyword/s')); $searchDate['keyword'] = isset($_GET['keyword']) ? $_GET['keyword'] : ''; ``` ```javascript var formObj = new Form('user-form'); // json_encode() 會自動轉換雙引號和反斜線，以確保生成正確的json格式字符串，而這種轉移和js是相通的，所以能夠直接使用沒有問題 var searchDate = {:json_encode($searchDate)}; formObj.init(searchDate); ``` * * * * * #### 總結 1. 我們遇到的問題是，特殊搜索詞的顯示（頁面中顯示與input搜索框中顯示），和再次搜索時的搜索詞不能一致的問題（我很難表述這個問題，需要你自己去感受）。 2. 我們用兩種方式解決了這個問題，**html實體轉義** 和 **js字符串轉義** * * * * * ### 補充 你有沒有遇到過，將一個頁面鏈接通過微信發給別人，微信中卻不能完整的顯示地址 ``` http://www.a.com/index/index/search.html?q=地方'地方 ```  比如這個地址，有很多軟件并不能夠很好的識別這樣的鏈接，對這樣的鏈接支持得不是很友好（QQ和微信），導致你發過去后，別人不能夠直接點擊完整的鏈接，非要復制到瀏覽器才能打開完整的鏈接，這個體驗就非常不好。 雖說這是個小問題，但是對于追求極致用戶體驗的我們來說，怎么能夠忍受呢。 有什么辦法解決這個問題呢。 其實瀏覽器向服務器發送的url都是經過url編碼了： 只是瀏覽器地址欄經過優化，為了照顧普通用戶，而顯示的是這樣的地址而已，我們復制就是從地址欄復制的，于是就出現這個問題了。 知道了原因后，解決方式也很簡單。那就是自己降低至url編碼，而不是讓瀏覽器自己編碼，你看大型網站，淘寶，京東都是這樣自己編碼處理的，所以地址欄你看不到搜索的中文關鍵字，都是被編碼過了，這樣就可以愉快的到處分享了。 不過貌似現代新的瀏覽器不會有這個問題了，看到的是中文，復制下來就是已經編碼過的。但是如果你遇到了這樣的問題，那解決方案就在這里。 * * * * * ### 擴展 [PHP addslashes() 函數](http://www.w3school.com.cn/php/func_string_addslashes.asp) [PHP htmlspecialchars() 函數](http://www.w3school.com.cn/php/func_string_htmlspecialchars.asp) [前端安全系列（一）：如何防止XSS攻擊？ - 美團技術團隊的個人空間 - 開源中國](https://my.oschina.net/meituantech/blog/2218539) [前端安全系列之二：如何防止CSRF攻擊？ - 美團技術團隊的個人空間 - 開源中國](https://my.oschina.net/meituantech/blog/2243958) * * * * * last update：2018-7-1 10:34:40