碎片時間學編程「112]：轉義 HTML

轉義的 HTML 字符進行轉義。

使用String.prototype.replace()方法與匹配需要轉義的字符的正則表達式一起使用。
使用函數的回調，使用字典（對象）將每個轉義字符實例替換為其關聯的非轉義字符。

JavaScript

const unescapeHTML = str =>
  str.replace(
    /&|<|>|'|"/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        ''': "'",
        '"': '"'
      }[tag] || tag)
  );

示例代碼：

unescapeHTML('<a href="#">Me & you</a>');
// '<a href="#">Me & you</a>'

更多內容請訪問我的網站：https://www.icoderoad.com

義字符串以在 HTML 中使用。

使用String.prototype.replace()方法與匹配需要轉義的字符的正則表達式一起使用。
使用回調函數使用字典對象將每個字符實例替換為其關聯的轉義字符。

JavaScript

const escapeHTML = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        "'": ''',
        '"': '"'
      }[tag] || tag)
  );

示例

escapeHTML('<a href="#">我 & 你</a>');
// '<a href="#">我 & 你</a>'

更多內容請訪問我的網站：https://www.icoderoad.com

ext()方法會把包含的字符轉義處理,html()則不會.所謂轉義就是字符的另一種顯示方法,例如"<" 顯示成 "<",這就是轉義了,其中的<就是<的轉義字符.還有很多可以轉義的字符,可以搜索下看看.

下邊是項目中用到的2個語句:span中包含了jquery的語句輸出結果.

1. $('.title').text("<img src=" ">");

顯示結果為<img src=" ">,這里的<img src=" ">不會被解析成html的img標簽,而是以存字母文字的形式顯示,也就是單純的字符串:<img src=" "> .并且f12查看源碼時看到span包含的<img src=" ">文字內容外層有雙引號哦.看下圖,

如果你用右鍵選擇編輯為html,則看到其中的轉義字符<這就說明我們的<被轉移了,

如果我們想把<img>顯示成標簽,被瀏覽器解析.那么就需要如下方法.

2. $('.title').html("<img >");

顯示結果為解析后的html代碼段,那么這里的<img >就會按照h5的標簽img圖片進行解析顯示了.下圖是f12的頁面代碼結果span中的<img>標簽外層無雙引號,且頁面此時會顯示出來圖片.

在線咨詢

上一篇：HTML 表格
下一篇：HTML5多媒體應用的技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

碎片時間學編程「112]：轉義 HTML

您的項目需求