由莫名其妙的錯誤開始

本來沒準備今天發部落格的，在乙個前端群中，一位老大哥風自由提出了乙個簡單卻很奇特的問題：

有乙個字串是這樣的：var s = ''+ '';

怎麼通過jquery得到其中content的值？

本來覺得這個問題蠻簡單的，既可以通過正則獲取，也可以通過jquery的$將這個字串變成乙個jq物件來獲取。但是也正是後來這個方法，卻帶來了問題。

以我的理解，定位content的方法應該為$(s).find("meta").attr("content")，但是這麼去獲取結果確並不正確。

於是做了簡單的嘗試：

var s = ''+ '
';$(s);
//[]

得到的並不是所詳細的結果，而是meta標籤。

這就有點奇怪了，風大猜測是

因為外面有，可能jquery不能把標籤變為dom。而在字串外層套一層div則確實能夠正確的獲取結果。

但是，這個結果真的正確麼？

又做了乙個簡單的嘗試：

var s = ''+
'';$(s);
//[
]

結果並不是我們所想象的那樣，而是仍舊去除了html標籤，只不過因為套用了一層div，使$(s).find("meta").attr("content")去正確找尋了節點，並不是保護了html標籤。

這個問題的原因，相信只有jq的原始碼能夠給我答案了。寫了幾行簡單的測試**，去通過斷點解讀一下jq的處理機制：

(function
() )();

事實證明，除了第一種方式不能正確的獲得結果以外，後兩種都能正確的獲取結果。通過研讀jq的原始碼中對jq物件建立的**，終於弄清楚了這個原因。

jq對傳入的字串會進行一次正則：

var parsed = rsingletag.exec( data );//
rsingletag=/^<(\w+)\s*\/?>(?:<\/\1>|)$/

解釋一下這個正則吧：

^<(\w+)\s*\/?

以《開頭，至少跟著乙個字元和任意個空白字元，之後出現0或1次/

這個就不說了，前面這些加起來就是這樣或者這樣的

(?:<\/\1>|)$

可以匹配<、乙個/或者空白並以之為結尾

這些就是

或者跟著

這種自閉合標籤後面的空

這樣如果沒有任何屬性和子節點的字串（比如''或者'

'這樣）會通過正則的匹配，當通過正則的匹配後則會通過傳入的上下文直接建立乙個節點：

if
( parsed ) 
//context為上下文

而未通過節點的字串，則通過建立乙個div節點，將字串置入div的innerhtml：

tmp.innerhtml = wrap[1] + elem.replace( rxhtmltag, "<$1>" ) + wrap[2];//將字串置入div物件的innerhtml

而瀏覽器是不允許div內直接包含的，因此會將html標籤過濾。

當過濾了html之後，剛才的字串變成了：

jq會從兩端向中間去尋找節點的頭尾，在這裡閉合標籤則被尋找為meta標籤。

這就是這次所得到的所有結論，總結一下：

如果你的標籤是沒有子節點和屬性的標籤，jq會通過正則判定後在你傳入的上下文環境直接建立這個節點。

如果你的標籤帶有子節點或者屬性，jq的正則不過，然後會建立乙個div，把你的字串作為div的innerhtml傳入，再對div內部的dom節點遍歷屬性和節點，去獲取class啊id啊之類的，然後再建立這個真正的節點。

但是瀏覽器不允許任何非frame類元素內部有html標籤，會將之過濾。

在過濾了html標籤後，head標籤和body標籤就成了兩個標籤，而jq是從外向內尋找包裹的標籤對的，所以這兩個標籤沒有被識別，而meta標籤因為是自閉合標籤，而且也是從外往內被包裹的最外層閉合標籤，因此就成了獲取這個標籤。

大概就是這樣了。

感謝閱讀~同時感謝風大~