摘要：筆記引用類型類型創建方法一方法二中使用的元字符因為有特殊的意義所以需要轉義如匹配使用構造函數創建的參數因為是字符串所以要進行雙重轉義如實例屬性是否設置了是否這是了是否設置了開始搜索下一個匹配的字符串位置從開始表達式的字符串表示實例方法方法一

筆記

5. 引用類型

5.4 RegExp 類型

創建 :

方法一

var expression = / pattern / flags
flags: g | i | m

方法二

var expression = new RegExp(pattern, flags) // pattern | flags (string)

pattern中使用的元字符因為有特殊的意義, 所以需要轉義. 如:
匹配 "[bc]at" => pattern = /[bc]at/i, 使用構造函數創建的參數因為是字符串所以要進行雙重轉義, 如:

 /[bc]at/           ==>     "[bc]at"
 /whello123/     ==>     "wwhello123" 

5.4.1 實例屬性:

pattern.global     // true 是否設置了g
pattern.ignoreCase // true 是否這是了i
pattern.multiline  // true 是否設置了m
pattern.lastIndex  // 0 開始搜索下一個匹配的字符串位置, 從0開始
pattern.source     // "[bc]at" 表達式的字符串表示

5.4.2 實例方法:

方法一 pattern.exec(str)

var text = "mom and dad and baby"
var pattern = /mom( and dad( and baby)?)?/gi

var matches = pattern.exec(text)
console.log(matches.index) // 0
console.log(matches.input) // "mom and dad and bady"
console.log(matches[0])    // "mom and dad and bady"
console.log(matches[1])    // "and dad and bady"
console.log(matches[2])    // "and bady"

對于exec()方法中模式的g, 即使設置了一次也只會返回一個匹配項, 但是多次調用該方法可以返回新匹配項的信息同時lastIndex會有變化, 而不設置則始終返回第一個匹配項的信息, 如:

var text     = "cat, bat, sat, fat",
    pattern1 = /.at/
var matches = pattern1.exec(text)
console.log(matches.index)      // 0
console.log(pattern1.lastIndex) // 0
console.log(matches[0])         // cat

var matches = pattern1.exec(text)
console.log(matches.index)      // 0
console.log(pattern1.lastIndex) // 0
console.log(matches[0])         // cat

var pattern2 = /.at/g

var matches2 = pattern2.exec(text)
console.log(matches2.index)     // 0
console.log(pattern2.lastIndex) // 3
console.log(matches2[0])        // cat

var matches2 = pattern2.exec(text)
console.log(matches2.index)     // 5
console.log(pattern2.lastIndex) // 8
console.log(matches2[0])        // cat

IE的lastIndex屬性存在偏差, 即使非全局模式下, lastIndex屬性也會變化

方法二 pattern.test(str)
如果str如pattern匹配則返回true否則返回false

var text    = "000-00-0000",
    pattern = /d{3}-d{2}-d{4}/
    
if (pattern.test(text)) {
    alert("ok!")
}

其他方法

var pattern = new RegExp("[bc]at", "gi")
pattern.toString()       // /[bc]at/gi
pattern.toLocaleString() // /[bc]at/gi
pattern.valueOf()        // /[bc]at/gi

5.4.3 RegExp 構造函數屬性

var text = "this has been a short summer",
    pattern = /(.)hort/g
if (pattern.test(text)) {
    console.log(RegExp.input)        // this has been a short summer 最近一次匹配的字符串
    console.log(RegExp.leftContext)  // this has been a 匹配項左側文本
    console.log(RegExp.rightContext) // summer 匹配項右側文本
    console.log(RegExp.lastMatch)    // short 最近一次匹配項
    console.log(RegExp.lastParen)    // s 最近一次匹配組
    console.log(RegExp.multiline)    // false 是否使用多行模式
}

也可以使用

var text = "this has been a short summer",
    pattern = /(.)hort/g
if (pattern.test(text)) {
    console.log(RegExp.$_)     // this has been a short summer 最近一次匹配的字符串
    console.log(RegExp.["$`"]) // this has been a 匹配項左側文本
    console.log(RegExp.["$""]) // summer 匹配項右側文本
    console.log(RegExp.["$&"]) // short 最近一次匹配項
    console.log(RegExp.["$+"]) // s 最近一次匹配組
    console.log(RegExp.["$*"]) // false 是否使用多行模式
}

其他屬性RegExp.$1, RegExp.$2 ... RegExp.$9

var text = "this has been a short summer",
    pattern = /(..)or(.)/g
if (pattern.test(text)) {
    console.log(RegExp.$1) // sh
    console.log(RegExp.$2) // t
}

15. DOM

15.6.1 創建節點

方法一
創建Element節點document.createElement("tagName")
創建Text節點document.createTextNode("text")

方法二
element.cloneNode(true)
非IE中element.importNode(true)

15.6.2 插入節點

parentNode.appendChild(node)

parentNode.insertBefore(node, parentNode.childNode[i])
注: 如果節點已經存在, 節點將從當前位置刪除插入新位置.

15.6.3 替換刪除節點

n.parentNode.removeChild(n)

n.parentNode.replaceChild(newNode, n)

15.6.4 DocumentFragment

document.createDocumentFragment()

15.8.1

scrollLeft, scrollTop滾動條位置

function getScrollOffsets (w) {
    w = w || window
    
    // <=IE8不支持, 其他都支持
    if (w.pageXOffset != null) return {x: w.pageXOffset, y: w.pageYOffset }
    
    // 標準模式下的IE以及任何瀏覽器
    var d = w.document
    if (document.compatMode == "CSS1Compat") return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
    
    // 怪異模式
    return {x: d.body.scrollLeft, y: d.body.scrollTop}
} 

clientWidth, clientHeight視口(窗口)尺寸

function getViewportSize (w) {
    w = w || window
    
    // <=IE8不支持, 其他都支持
    if (w.innerWidth != null) return {w: w.innerWidth, h: w.innerHeight} 
    
    // 標準模式下的IE以及任何瀏覽器
    if (document.campatMode == "CSS1Compat") return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}
    
    // 對怪異模式下的瀏覽器
    return {w: d.body.clientWidth, h: d.body.clientHeight}
}

15.8.2 查詢元素的幾何尺寸

box = e.getBindingClientRect()

box = {
    left:   "左上角水平",
    top:    "左上角垂直",
    right:  "右下角水平",
    bottom: "右下角垂直"  
}

內聯元素
arr = e.getClientRects()

注: getBindingClientRect, getClientRects不是"實時的"

15.8.3 判斷某點上的元素

document.elementFromPoint(x, y)(視口坐標)返回最里面和最上面的元素

15.8.4 滾動

scroll(), scrollTop(), scrollLeft(), scrollTo()

scrollBy()和以上幾種方法類似, 但是它是相對的,在當前滾動條的偏移量上增加
setInterval(function() {scrollBy(0, 10)}, 200)

e.scrollIntoView()將元素上邊緣放在接近視口的上邊緣
e.scrollINtoView(false)將元素下邊緣放在接近視口的上邊緣, 該方法類似錨點

15.8.5 元素尺寸, 位置, 溢出的更多信息

offsetWidth        clientWidth        scrollWidth
offsetHeight       clientHeight       scrollHeight
offsetLeft         clientLeft         scrollLeft
offsetTop          clientTop          scrollTop
offsetParent

offset
offsetWidth, offsetHeight返回不包含margin. 大多數元素返回文檔坐標, 但定位和一些其他元素(如表格單元), 返回相對祖先元素非文檔, offsetParent返回相對祖先元素, 如果offsetParent為null, 這些屬性都是文檔坐標

不包含滾動條的情況
function getElementPosition(e) {
    var x = 0, y = 0
    while(e != null) {
        x += e.offsetLeft
        y += e.offsetTop
        e = e.offsetParent
    }
    return {x: x, y:y}
}

client
clientWidth, clientHeight 返回不包含margin border 滾動條 內聯元素總返回0, clientLeft clientTop返回包含滾動條

function getElementPositon () {
    var x = 0, y = 0
    for(var e = elt; e != null; e = e.offsetParent) {
        x += e.offsetLeft
        y += e.offsetTop
    }    
    for (var e = elt.parentNode; e != null && e.noeType == 1; e = e.parentNode) {
        x -= e.scrollLeft
        y -= e.scrollTop
    }
    return {x: x, y:y}
}