js contains方法實現(xiàn)代碼
一個小誤區(qū) JS中的contains
在Java語言中,contains可以用于判斷str1是否包含str2
原生JS中是有contains方法的
結(jié)構(gòu)與測試代碼如下
<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()
但是我們可以通過擴展的方法來實現(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)); //字符擴展contains就不會報錯了 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ù)組擴展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>
下面是運行結(jié)果
IE有許多好用的方法,后來都被其他瀏覽器抄襲了,比如這個contains方法。如果A元素包含B元素,則返回true,否則false。唯一不支持這個方法的是IE的死對頭firefox。
為了兼容IE和FF我們不得不用以下方法:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
不過火狐支持compareDocumentPosition() 方法,這是W3C制定的方法,標準瀏覽器都支持,不過實用性性很差,因此沒有什么人用,推廣不開來。它的使用形式與contains差不多,但返回的不是一個布爾值,而是一個很奇怪的數(shù)值,它是通過如下方式累加計算出來的:
Bits | Number | Meaning |
---|---|---|
000000 | 0 | 元素一致 |
000001 | 1 | 節(jié)點在不同的文檔(或者一個在文檔之外) |
000010 | 2 | 節(jié)點 B 在節(jié)點 A 之前 |
000100 | 4 | 節(jié)點 A 在節(jié)點 B 之前 |
001000 | 8 | 節(jié)點 B 包含節(jié)點 A |
010000 | 16 | 節(jié)點 A 包含節(jié)點 B |
100000 | 32 | 瀏覽器的私有使用 |
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
PPK給出如下解決方法。
if (window.Node && Node.prototype && !Node.prototype.contains){
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16)
}
}
我搞出個更短的:
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
//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;
}
- JavaScript中擴展Array contains方法實例
- javascript contains和compareDocumentPosition 方法來確定是否HTML節(jié)點間的關(guān)系
- JS中判斷某個字符串是否包含另一個字符串的五種方法
- js判斷數(shù)組是否包含某個字符串變量的實例
- JS給Array添加是否包含字符串的簡單方法
- jsp 判斷l(xiāng)ist是否包含string的實現(xiàn)方法
- jstl中判斷l(xiāng)ist中是否包含某個值的簡單方法
- 判斷數(shù)組是否包含某個元素的js函數(shù)實現(xiàn)方法
- JavaScript判斷數(shù)組是否包含指定元素的方法
- JavaScript判斷一個字符串是否包含指定子字符串的方法
- js判斷一個字符串是否包含一個子串的方法
- JS檢測輸入字符是否包含非法字符的示例代碼
- 使用js判斷數(shù)組中是否包含某一元素(類似于php中的in_array())
- 編寫js擴展方法判斷一個數(shù)組中是否包含某個元素
- javascript 判斷字符串是否包含某字符串及indexOf使用示例
- javascript 判斷數(shù)組是否已包含了某個元素的函數(shù)
- JS實現(xiàn)判斷數(shù)組是否包含某個元素示例
- javascript中contains是否包含功能實現(xiàn)代碼(擴展字符、數(shù)組、dom)
相關(guān)文章
利用prop-types第三方庫對組件的props中的變量進行類型檢測
本篇文章主要介紹了利用prop-types第三方庫對組件的props中的變量進行類型檢測的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05JavaScript XML實現(xiàn)兩級級聯(lián)下拉列表
用xml作為存儲容器,不用數(shù)據(jù)庫,速度和效率高些。2008-11-11