JavaScript基础

笔记

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'
 /\w\\hello\\123/     ==>     '\\ww\\\\hello\\\\123' 

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 滚动条 <i> <span> <code>内联元素总返回0, clientLeft clientTop返回包含滚动条

• scroll
  scrollWidth scrollHeight内容区域加内边距加溢出内容尺寸,scrollLeft scrolTop滚动条的位置, 可写属性, 改写getElementPosition

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}
}

getElementPosition可以在不支持getBoundingClientRect的浏览器中使用, 但低效, 不可靠, 不支持的浏览器最好用JQuery类库

15.9