logo头像

求知若渴,虚心若愚

jQuery - jQuery源码学习 - jQuery扩展工具方法源码分析(三)

jQuery转换方法

  • parseHTML()
  • parseJSON()
  • parseXML()

parseHTML()

  • 将HTML字符串解析为对应的DOM节点数组
  • 三个参数:data,context,context
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

parseHTML: function( data, context, context ) {

// 对于非法参数一律返回null。如果参数data不是字符串,或者可以转换为false,则返回null。
if ( !data || typeof data !== "string" ) {
return null;
}

// 只有两个参数的时候,第二个就是是否保存script标签,这时候context就没有传进来!
if ( typeof context === "boolean" ) {
keepScripts = context;
context = false;
}
// 如果只有两个参数那么context就是document对象!
context = context || document;

// 如果不是单个标签那么parsed就是null,所谓的单个标签就是<div/>或者<div></div>但是<div>hello</div>不满足!
var parsed = rsingleTag.exec( data ),
// 如果keepScripts是false,那么scripts就是
scripts = !keepScripts && [];

// Single tag
if ( parsed ) {
// 如果是单个标签就调用相应的createElement方法,默认上下文是document!
return [ context.createElement( parsed[1] ) ];
}
// 如果不是单个标签就调用buildFragment方法,把html字符串传入,同时上下文也传入,第三个参数就是scripts!
// 如果paseHTML的第三个参数是false,那么这里的scripts就是一个数组,传递到buildFragment中会把所有的script标签放在里面
//所以就要收到移除!
parsed = jQuery.buildFragment( [ data ], context, scripts );

if ( scripts ) {
jQuery( scripts ).remove();
}
// buildFragment返回的是文档碎片,所以要变成数组,调用merge方法
return jQuery.merge( [], parsed.childNodes );
},
  • 如果没有指定context参数,或该参数为null或undefined,则默认为当前document。如果创建的DOM元素用于另一个文档,例如iframe,则应该指定该iframe的document对象
参数 描述
data String类型 需要解析并转为DOM节点数组的HTML字符串
context Element类型 指定在哪个Document中创建元素,默认为当前文档的document
keepScripts Boolean类型 指定传入的HTML字符串中是否包含脚本,默认为false

TIP
大多数jQuery API都允许HTML字符串在HTML中包含运行脚本。

jQuery.parseHTML()不会运行解析的HTML中的脚本,除非你明确将参数keepScripts指定为true。

不过,大多数环境仍然可以间接地执行脚本

例如:通过属性。调用者应该避免 这样做,并清理或转义诸如URL、cookie等来源的任何不受信任的输入,从而预防出现这种情况。

出于未来的兼容性考虑,当参数keepScripts被省略或为false时,调用者应该不依赖任何运行脚 本内容的能力。

parseJSON()

  • 转为json,目前用的是JSON.parse

parseXML()

  • 将字符串解析为对应的XML文档
  • 该函数将使用浏览器内置的解析函数来创建一个有效的XML文档,该文档可以传入jQuery()函数来创建一个典型的jQuery对象,从而对其进行遍历或其他操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

parseXML: function( data ) {
var xml, tmp;
// 对于非法参数一律返回null。如果参数data不是字符串,或者可以转换为false,则返回null
if ( !data || typeof data !== "string" ) {
return null;
}

// Support: IE9
// 尝试用标准解析器DOMParser解析
// 在IE 9+中,如果解析失败,则会抛出异常。如果抛出异常,在catch块中设置xml为undefined,然后抛出一个更易读的异常
try {
tmp = new DOMParser();
xml = tmp.parseFromString( data , "text/xml" );
} catch ( e ) {
xml = undefined;
}
// 判断解析是否失败
if ( !xml || xml.getElementsByTagName( "parsererror" ).length ) {
jQuery.error( "Invalid XML: " + data );
}
return xml;
},
  • DOMParser在HTML5中标准化,可以将XML或HTML字符串解析为一个DOM文档。

    • 解析时,首先要创建一个DOMParser对象
    • 然后使用它的方法parseFromString()来解析XML或HTML字符串。
    • DOMParser.parseFromString( DOMString str, SupportedType type )
      • 参数str:待解析的 XML 或 HTML 字符串
      • 参数type:支持的类型
        • “text/html”
        • “text/xml”
        • “application/xml”
        • “application/xhtml+xml”
        • “image/svg+xml”
      • 返回一个解析后的新创建的文档对象
  • 如果解析失败,则抛出一个更易读的异常。如果满足以下条件之一,则认为解析失败:

    • 在IE 9+中,通过标准XML解析器DOMParser解析失败,此时!xml为true
    • 在其他浏览器中,通过标准XML解析器DOMParser解析失败,此时xml.getElementsByTagName(“parsererror”).length可以转换为true。
  • 如果解析成功,则返回解析结果
支付宝打赏 微信打赏

赞赏是对我们的肯定!