【JavaScript框架封裝】JavaScript中的文字字串的轉義和反轉義的實現

向善的燈發表於2018-07-18
JavaScript框架封裝字串
版權宣告：本文為博主原創文章，未經博主允許不得轉載。更多學習資料請訪問我愛科技論壇:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81105949

如果是想把本地的一個字串串存到伺服器，再次取出來的還是文字的話，就需要這個文字字串的轉義；

 /**
     * 對一個字串的轉義
     * @param str
     * @return {*}
     */
    function escapeHTML(str) {
        return str.replace(/$/g, `&`)     // 結尾的字元用&amp替換
            .replace(/</g, `&lt;`)          // < 用&lt替換
            .replace(/>/g, `&gt;`)          // > 用&gt替換
            .replace(/`/g, `&#39;`)         // ` 用&#39替換
            .replace(/"/g, `&quot;`);      // " 用&quot替換
    }


    /**
     * 對一個字串的反轉義
     * @param str
     * @return {*}
     */
    function unscapeHTML(str) {
        // 查詢所有的< > & " ` 字元，並替換掉
        return str.replace(/&lt;/g, `<`)
            .replace(/&gt;/g, `>`)
            .replace(/&#39;/g, ```)
            .replace(/&quot;/g, `"`)
            .replace(/&amp;/g, ``)

            // String.fromCharCode() 靜態方法根據指定的 Unicode 編碼中的序號值來返回一個字串。String.fromCharCode(65,66,67) “ABC”
            .replace(/&#(d+)/g, function ($0, $1) {
                //parseInt() 函式將給定的字串以指定基數（radix/base）解析成為整數。就是 你想把string當成radix進位制數解析成10進位制
                return String.fromCharCode(parseInt($1, 10));
            });
    }

測試程式碼如下：

// 轉義和反轉義的功能測試
    var tagText = "<p><b>123&456</b></p>";
    // 如果直接列印輸出的話，就是一個字串
    console.log(tagText);   // <p><b>123&456</b></p>
    res = escapeHTML(tagText);
    console.log(res);  // &ltp&gt&ltb&gt123&456&lt/b&gt&lt/p&gt&amp

    // 如果把一個字串轉義為實體之後，就不會正常在頁面中顯示出來內容，只會顯示的是一個字串
    document.body.innerHTML = res;  // 會顯示的是一個字串，&ltp&gt&ltb&gt123&456&lt/b&gt&lt/p&gt&amp， 但是瀏覽器也會自動將實體轉換解析

    // 如果是一個字串的話，就會直接在網頁中顯示出來（按照HTML進行解析）
    document.body.innerHTML = tagText;  // 相當是設定了一段HTML程式碼

    // 對字元反轉義之後的結果
    res = unscapeHTML(res);  // <p><b>123&456</b></p>
    console.log(res);           // 又恢復到最初始的狀態

 


相關文章