js contains方法實(shí)現(xiàn)代碼

更新時(shí)間：2020年04月07日 15:36:55 投稿：mdxy-dxy

IE有許多好用的方法，后來都被其他瀏覽器抄襲了，比如這個(gè)contains方法。如果A元素包含B元素，則返回true，否則false。唯一不支持這個(gè)方法的是IE的死對(duì)頭firefox。

一個(gè)小誤區(qū) JS中的contains

在Java語言中，contains可以用于判斷str1是否包含str2

原生JS中是有contains方法的

結(jié)構(gòu)與測(cè)試代碼如下

<div id="div1">
<div id="div2">
jb51.net
</div>
</div>
<script type="text/javascript">
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
console.log(div1.contains(div2));

var str1="jb51.net";
var str2="jb51";
console.log(str1.contains(str2));
</script>

但它并不是字符串方法，，僅用于判斷DOM元素的包含關(guān)系，參數(shù)是Element類型

若要在JS中判斷倆字符串的包含關(guān)系，用indexOf()

但是我們可以通過擴(kuò)展的方法來實(shí)現(xiàn)

<div id="div1">
<div id="div2">
jb51.net
</div>
</div>
<script type="text/javascript">
var div1= document.getElementById("div1");
var div2= document.getElementById("div2");
console.log("div1.contains(div2)="+div1.contains(div2));

//字符擴(kuò)展contains就不會(huì)報(bào)錯(cuò)了
String.prototype.contains = function(a) {
  return - 1 < this.indexOf(a)
};

var str1="jb51.net";
var str2="jb51";
console.log("str1.contains(str2)="+str1.contains(str2));

//數(shù)組擴(kuò)展contains適用于數(shù)組判斷
Array.prototype.contains = function(a) {
  if ("string" == typeof a || "number" == typeof a) for (var b in this) if (a == this[b]) return ! 0;
  return ! 1
};

var arr1=["jb51.net","jbzj.com","jb51.com"];
var str3="jb51.net";
console.log("arr1.contains(str3)="+arr1.contains(str3));
</script>

下面是運(yùn)行結(jié)果

為了兼容IE和FF我們不得不用以下方法：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

不過火狐支持compareDocumentPosition() 方法，這是W3C制定的方法，標(biāo)準(zhǔn)瀏覽器都支持，不過實(shí)用性性很差，因此沒有什么人用，推廣不開來。它的使用形式與contains差不多，但返回的不是一個(gè)布爾值，而是一個(gè)很奇怪的數(shù)值，它是通過如下方式累加計(jì)算出來的：

Bits	Number	Meaning
000000	0	元素一致
000001	1	節(jié)點(diǎn)在不同的文檔（或者一個(gè)在文檔之外）
000010	2	節(jié)點(diǎn) B 在節(jié)點(diǎn) A 之前
000100	4	節(jié)點(diǎn) A 在節(jié)點(diǎn) B 之前
001000	8	節(jié)點(diǎn) B 包含節(jié)點(diǎn) A
010000	16	節(jié)點(diǎn) A 包含節(jié)點(diǎn) B
100000	32	瀏覽器的私有使用

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

PPK給出如下解決方法。

復(fù)制代碼代碼如下:

 
if (window.Node && Node.prototype && !Node.prototype.contains){ 

Node.prototype.contains = function (arg) { 

return !!(this.compareDocumentPosition(arg) & 16) 

} 

}

我搞出個(gè)更短的：

復(fù)制代碼代碼如下:

 
if(!!window.find){ 

HTMLElement.prototype.contains = function(B){ 

return this.compareDocumentPosition(B) - 19 > 0 

} 

}

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

復(fù)制代碼代碼如下:

 
//2011.9.24 by 司徒正美 

var contains = function(root, el) { 

if (root.compareDocumentPosition) 

return root === el || !!(root.compareDocumentPosition(el) & 16); 

if (root.contains && el.nodeType === 1){ 

return root.contains(el) && root !== el; 

} 

while ((el = el.parentNode)) 

if (el === root) return true; 

return false; 

}

您可能感興趣的文章: