碎片時間學編程「112]：轉(zhuǎn)義 HTML

轉(zhuǎn)義的 HTML 字符進行轉(zhuǎn)義。

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

JavaScript

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

示例代碼：

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

更多內(nèi)容請訪問我的網(wǎng)站：https://www.icoderoad.com

產(chǎn)生原因：

我們知道html是如這些標簽包含的格式化文本，當用瀏覽器打開時，瀏覽器內(nèi)部的標簽解釋器把不同的標簽解釋為不同的含義。這時默認所有內(nèi)容都是在標簽之內(nèi)的，標簽本身并不是內(nèi)容。如果內(nèi)容中也有標簽怎么辦？這是個問題嗎？當然。當一個負責講解html是什么的頁面輸出時，html頁面中必然包含有標簽需要輸出顯示，而瀏覽器并不能智能的分清楚哪些是需要解釋哪些不需要。

解決方法：

其中一個辦法就是轉(zhuǎn)義。為了區(qū)分需要解釋和不需要解釋的<>，將不需要解釋的<>用轉(zhuǎn)義字符代替，html會將它們解釋為<>。和html一樣，其他編程語言也有一些內(nèi)置特殊符號需要用這樣的方法處理，比如php中的$，下面列舉一些：

如HTML轉(zhuǎn)義符、java 轉(zhuǎn)義符、xml 轉(zhuǎn)義符、 oracle 轉(zhuǎn)義符、sql 轉(zhuǎn)義符、sqlserver 轉(zhuǎn)義符、php 轉(zhuǎn)義符、asp 轉(zhuǎn)義符、vb轉(zhuǎn)義符、 javascript 轉(zhuǎn)義符等等，還有網(wǎng)址中的百分號。

轉(zhuǎn)義字符串有三部分組成:

＆符號+實體名稱/編號+；符號

例如，HTML的< >&"?的轉(zhuǎn)義字符串分別是

“＆lt;”或者“＆＃60;”

“＆gt;”或者“＆＃62;”

“＆amp;”或者“＆＃38;”

“＆quot;”或者“＆＃34;”

“＆copy;”或者“＆＃169;”

在高級編程語言中已經(jīng)將轉(zhuǎn)義字符的轉(zhuǎn)義處理做成了函數(shù)。如php中的htmlspecialchars()負責將函數(shù)參數(shù)轉(zhuǎn)為對應的轉(zhuǎn)義字符串

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

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

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

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

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

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

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

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

在線咨詢

上一篇：HTML 顏色
下一篇：使用vue簡單實現(xiàn)：模糊查找

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

碎片時間學編程「112]：轉(zhuǎn)義 HTML

您的項目需求