符串作为基本的信息交流的桥梁,几乎被所有的编程语言所实现(然而c、c++没有提供)。多数开发者几乎每天都在和字符串打交道,语言内置的String模块,极大地提升了开发者的效率。JavaScript通过自动装箱字符串字面量为String对象,自然地继承了String.prototype的所有方法,更加简化了字符串的使用。
截止ES6,字符串共包含31个标准的API方法,其中有些方法出镜率较高,需要摸透原理;有些方法之间相似度较高,需要仔细分辨;甚至有些方法执行效率较低,应当尽量少的使用。下面将从String构造器方法说起,逐步帮助你掌握字符串
String构造器方法
fromCharCode
fromCharCode() 方法返回使用指定的Unicode序列创建的字符串,也就是说传入Unicode序列,返回基于此创建的字符串。
语法:fromCharCode(num1, num2,…),传入的参数均为数字。
如下这是一个简单的例子,将返回 ABC、abc、*、+、- 和 /:
String.fromCharCode(65, 66, 67); // "ABC" String.fromCharCode(97, 98, 99); // "abc" String.fromCharCode(42); // "*" String.fromCharCode(43); // "+" String.fromCharCode(45); // "-" String.fromCharCode(47); // "/"
看起来fromCharCode像是满足了需求,但实际上由于js语言设计时的先天不足(只能处理UCS-2编码,即所有字符都是2个字节,无法处理4字节字符),通过该方法并不能返回一个4字节的字符,为了弥补这个缺陷,ES6新增了fromCodePoint方法
fromCodePoint(ES6)
fromCodePoint() 方法基于ECMAScript 2015(ES6)规范,作用和语法同fromCharCode方法,该方法主要扩展了对4字节字符的支持。
// "" 是一个4字节字符,我们先看下它的数字形式 "".codePointAt(); // 119558 //调用fromCharCode解析之,返回乱码 String.fromCharCode(119558); // "?" //调用fromCodePoint解析之,正常解析 String.fromCodePoint(119558); // ""
除了扩展对4字节的支持外,fromCodePoint还规范了错误处理,只要是无效的Unicode编码,就会抛出错误RangeError: Invalid code point...,这就意味着,只要不是符合Unicode字符范围的正整数(Unicode最多可容纳1114112个码位),均会抛出错误,而String.fromCharCode()均返回空字符串
String.fromCodePoint('abc'); // RangeError: Invalid code point NaN String.fromCodePoint(Infinity); // RangeError: Invalid code point Infinity String.fromCodePoint(-1.23); // RangeError: Invalid code point -1.23
raw(ES6)
raw() 方法基于ECMAScript 2015(ES6)规范,它是一个模板字符串的标签函数,作用类似于Python的r和C#的@字符串前缀,都是用来获取一个模板字符串的原始字面量。
语法: String.raw(callSite, …substitutions),callSite即模板字符串的『调用点对象』,…substitutions表示任意个内插表达式对应的值,这里理解起来相当拗口,下面我将通俗的讲解它。
// 防止特殊字符串被转义 String.raw`a\nb\tc`; // 输出为 "a\nb\tc" // 支持内插表达式 let name="louis"; String.raw`Hello \n ${name}`; // "Hello \n louis" // 内插表达式还可以运算 String.raw`1+2=${1+2},2*3=${2*3}`; // "1+2=3,2*3=6" // 对象的raw属性值为字符串时,从第二个参数起,它们分别被插入到下标为0,1,2,...n的元素后面 String.raw({raw: 'abcd'}, 1, 2, 3); // "a1b2c3d" // 对象的raw属性值为数组时,从第二个参数起,它们分别被插入到数组下标为0,1,2,...n的元素后面 String.raw({raw: ['a', 'b', 'c', 'd']}, 1, 2, 3); // "a1b2c3d"
那么怎么解释String.raw函数按照下标挨个去插入的特性呢?
In most cases, String.raw() is used with template strings. The first syntax mentioned above is only rarely used, because the JavaScript engine will call this with proper arguments for you, just like with other tag functions.
这意味着,String.raw作为函数调用时,基本与ES6的tag标签模板一样
// 如下是tag函数的实现 function tag(){ const array=arguments[0]; return array.reduce((p, v, i)=> p + (arguments[i] || '') + v); } // 回顾一个simple的tag标签模板 tag`Hello ${ 2 + 3 } world ${ 2 * 3 }`; // "Hello 5 world 6" // 其实就想当于如下调用 tag(['Hello ', ' world ', ''], 5, 6); // "Hello 5 world 6"
因此String.raw作为函数调用时,不论对象的raw属性值是字符串还是数组,插槽都是天生的,下标为0,1,2,…n的元素后面都是插槽(不包括最后一个元素)。实际上,它相当于是这样的tag函数:
function tag(){ const array=arguments[0].raw; if(array===undefined || array===null){ // 这里可简写成 array==undefined throw new TypeError('Cannot convert undefined or null to object'); } return array.reduce((p, v, i)=> p + (arguments[i] || '') + v); }
实际上,String.raw作为函数调用时,若第一个参数不是一个符合标准格式的对象,执行将抛出TypeError错误。
String.raw({123: 'abcd'}, 1, 2, 3); // TypeError: Cannot convert undefined or null to object
String.prototype
和其他所有对象一样,字符串实例的所有方法均来自String.prototype。以下是它的属性特性:
writable: false
enumerable: false
configurable: false
可见,字符串属性不可编辑,任何试图改变它属性的行为都将抛出错误。
属性
String.prototype共有两个属性,如下:
方法
字符串原型方法分为两种,一种是html无关的方法,一种是html有关的方法。我们先看第一种。但是无论字符串方法如何厉害,都不至于强大到可以改变原字符串。
常用的方法有,charAt、charCodeAt、concat、indexOf、lastIndexOf、localeCompare、match、replace、search、slice、split、substr、substring、toLocaleLowerCase、toLocaleUpperCase、toLowerCase、toString、toUpperCase、trim、valueof 等ES5支持的,以及 codePointAt、contains、endsWith、normalize、repeat、startsWith 等ES6支持的,还包括 quote、toSource、trimLeft、trimRight 等非标准的。
接下来我们将对各个方法分别举例阐述其用法。若没有特别说明,默认该方法兼容所有目前主流浏览器。
charAt
charAt() 方法返回字符串中指定位置的字符。
语法:str.charAt(index)
index 为字符串索引(取值从0至length-1),如果超出该范围,则返回空串
console.log("Hello, World".charAt(8)); // o, 返回下标为8的字符串o
charCodeAt
charCodeAt() 返回指定索引处字符的 Unicode 数值。
语法:str.charCodeAt(index)
index 为一个从0至length-1的整数。如果不是一个数值,则默认为 0,如果小于0或者大于字符串长度,则返回 NaN。
Unicode 编码单元(code points)的范围从 0 到 1,114,111。开头的 128 个 Unicode 编码单元和 ASCII 字符编码一样.
charCodeAt() 总是返回一个小于 65,536 的值。因为高位编码单元需要由一对字符来表示,为了查看其编码的完成字符,需要查看 charCodeAt(i) 以及 charCodeAt(i+1)
console.log("Hello, World".charCodeAt(8)); // 111 console.log("前端工程师".charCodeAt(2)); // 24037, 可见也可以查看中文Unicode编码
concat
concat() 方法将一个或多个字符串拼接在一起,组成新的字符串并返回。
语法:str.concat(string2, string3, …)
console.log("早".concat("上","好")); // 早上好 1
但是 concat 的性能表现不佳,强烈推荐使用赋值操作符(+或+=)代替 concat。”+” 操作符大概快了 concat 几十倍。
indexOf 和 lastIndexOf
indexOf() 方法用于查找子字符串在字符串中首次出现的位置,没有则返回 -1。该方法严格区分大小写,并且从左往右查找。而 lastIndexOf 则从右往左查找,其它与前者一致。
语法:str.indexOf(searchValue [, fromIndex=0]),str.lastIndexOf(searchValue [, fromIndex=0])
searchValue 表示被查找的字符串,fromIndex 表示开始查找的位置,默认为0,如果小于0,则查找整个字符串,若超过字符串长度,则该方法返回-1,除非被查找的是空字符串,此时返回字符串长度。
console.log("".indexOf("",100)); // 0 console.log("IT改变世界".indexOf("世界")); // 4 console.log("IT改变世界".lastIndexOf("世界")); // 4
localeCompare
localeCompare() 方法用来比较字符串,如果指定字符串在原字符串的前面则返回负数,否则返回正数或0,其中0 表示两个字符串相同。该方法实现依赖具体的本地实现,不同的语言下可能有不同的返回。
语法:str.localeCompare(str2 [, locales [, options]])
var str="apple"; var str2="orange"; console.log(str.localeCompare(str2)); // -1 console.log(str.localeCompare("123")); // 1
match
match() 方法用于测试字符串是否支持指定正则表达式的规则,即使传入的是非正则表达式对象,它也会隐式地使用new RegExp(obj)将其转换为正则表达式对象。
语法:str.match(regexp)
该方法返回包含匹配结果的数组,如果没有匹配项,则返回 null。
描述
相关 RegExp 方法
var str="World Internet Conference"; console.log(str.match(/[a-d]/i)); // ["d", index: 4, input: "World Internet Conference"] console.log(str.match(/[a-d]/gi)); // ["d", "C", "c"] // RegExp 方法如下 console.log(/[a-d]/gi.test(str)); // true console.log(/[a-d]/gi.exec(str)); // ["d", index: 4, input: "World Internet Conference"]
由上可知,RegExp.test(str) 方法只要匹配到了一个字符也返回true。而RegExp.exec(str) 方法无论正则中有没有包含 g 标志,RegExp.exec将直接返回第一个匹配结果,且该结果同 str.match(regexp) 方法不包含 g 标志时的返回一致。
replace
语法 str.replace( regexp | substr, newSubStr | function[, flags] )
参数
简单概括,replace拥有两个参数,第一个是需要替换的字符串或者正则表达式;第二个是新的字符串或者一个function,这样参数便有四种组合.
该方法并不改变调用它的字符串本身,而只是返回替换后的字符串.
var b=a.replace("before","after"); console.log(b); // "what is this? after"
如果第一个参数是正则表达式,新的字符串中可以用$符号取正则中匹配的子串(也就是正则中被括号包裹的部分):
var a="what is this? before"; var b=a.replace(/(^\w+).*?(\w+)$/,"$2 $1");//括号分割的部分依次为子串1....n console.log(b); // "before what"
第二个参数其实可为一个function,最终字符串将以function的返回值作为replace的返回值,以下是该function的形参: function(match,p1…,offset,string),可见至少包含三个形参(即arguments.length>=3)
function replacer(match,p1,p2,offset,string){ //此时p1=" is",p2=" this" return p1+" that";//如果返回为空串,则匹配内容替换为空,如果不返回,则匹配内容替换为undefined } var a="what is this? before"; var b=a.replace(/(\s\w+)(\s\w+)/,replacer); console.log(b); // "what is that? before" function replacer(match,offset,string){ //由于字符串中不会有括号进行分组,此时没有子串 return offset+" that";//偏移为4 } var a="what is this? before"; var b=a.replace(" is this",replacer); console.log(b); // "what4 that? before"
基于 replace 方法的第三个用法, 我们可以实现一个tmpl方法, 输入一个模板字符串, 输入一个key-value对象, 即可生成新的字符串.
var template="one {a} two {b} {c}", obj={a:"apple",b:"orange",c:"..."}, _array=[]; function tmpl(template,obj){ var retu=template.replace(/([^{}]*){(.)}/g,function(match,p1,p2,offset,string){ _array.push({'match':match, 'p1':p1, 'p2':p2, 'offset':offset, 'string':string}); return p1+obj[p2]; }); console.table && console.table(_array); !console.table && console.log(_array); console.log(retu); } tmpl(template,obj);
.(小数点):匹配除换行符之外的任何单个字符。例如,/.n/将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on',但是不会匹配 'nay'。
[^xyz]:一个反向字符集。也就是说, 它匹配任何没有包含在方括号中的字符。你可以使用破折号(-)来指定一个字符范围。任何普通字符在这里都是起作用的。例如,[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’,也匹配“chop”中的‘h’。
search
search() 方法用于测试字符串对象是否包含某个正则匹配,相当于正则表达式的 test 方法,且该方法比 match() 方法更快。如果匹配成功,search() 返回正则表达式在字符串中首次匹配项的索引,否则返回-1。
注意:search方法与indexOf方法作用基本一致,都是查询到了就返回子串第一次出现的下标,否则返回-1,唯一的区别就在于search默认会将子串转化为正则表达式形式,而indexOf不做此处理,也不能处理正则
语法:str.search(regexp) var str="abcdefg"; console.log(str.search(/[d-g]/)); // 3, 匹配到子串"defg",而d在原字符串中的索引为3
search() 方法不支持全局匹配(正则中包含g参数),如下:
console.log(str.search(/[d-g]/g)); // 3, 与无g参数时,返回相同
slice
slice() 方法提取字符串的一部分,并返回新的字符串。该方法有些类似 Array.prototype.slice 方法。
语法:str.slice(start, end)
首先 end 参数可选,start可取正值,也可取负值。
var str="It is our choices that show what we truly are, far more than our abilities."; console.log(str.slice(0,-30)); // It is our choices that show what we truly are console.log(str.slice(-30)); // , far more than our abilities.
split
split() 方法把原字符串分割成子字符串组成数组,并返回该数组。
语法:str.split(separator, limit)
两个参数均是可选的,其中 separator 表示分隔符,它可以是字符串也可以是正则表达式。如果忽略 separator,则返回的数组包含一个由原字符串组成的元素。如果 separator 是一个空串,则 str 将会被分割成一个由原字符串中字符组成的数组。limit 表示从返回的数组中截取前 limit 个元素,从而限定返回的数组长度。
var str="today is a sunny day"; console.log(str.split()); // ["today is a sunny day"] console.log(str.split("")); // ["t", "o", "d", "a", "y", " ", "i", "s", " ", "a", " ", "s", "u", "n", "n", "y", " ", "d", "a", "y"] console.log(str.split(" ")); // ["today", "is", "a", "sunny", "day"]
使用limit限定返回的数组大小,如下:
console.log(str.split(" ", 1)); // ["today"] console.log(str.split(/\s*is\s*/)); // ["today", "a sunny day"] // 若正则分隔符里包含捕获括号,则括号匹配的结果将会包含在返回的数组中。 console.log(str.split(/(\s*is\s*)/)); // ["today", " is ", "a sunny day"]
substr
substr() 方法返回字符串指定位置开始的指定数量的字符。
语法:str.substr(start[, length])
start 表示开始截取字符的位置,可取正值或负值。取正值时表示start位置的索引,取负值时表示 length+start位置的索引。
length 表示截取的字符长度。
var str="Yesterday is history. Tomorrow is mystery. But today is a gift."; console.log(str.substr(47)); // today is a gift. console.log(str.substr(-16)); // today is a gift.
substring
substring() 方法返回字符串两个索引之间的子串。
语法:str.substring(indexA[, indexB])
indexA、indexB 表示字符串索引,其中 indexB 可选,如果省略,则表示返回从 indexA 到字符串末尾的子串。
描述
substring 要截取的是从 indexA 到 indexB(不包含)之间的字符,符合以下规律:
var str="Get outside every day. Miracles are waiting everywhere."; console.log(str.substring(1,1)); // "" console.log(str.substring(0)); // Get outside every day. Miracles are waiting everywhere. console.log(str.substring(-1)); // Get outside every day. Miracles are waiting everywhere. console.log(str.substring(0,100)); // Get outside every day. Miracles are waiting everywhere. console.log(str.substring(22,NaN)); // Get outside every day.
toLocaleLowerCase & toLocaleUpperCase
toLocaleLowerCase() 方法返回调用该方法的字符串被转换成小写的值,转换规则根据本地化的大小写映射。而toLocaleUpperCase() 方法则是转换成大写的值。
语法:str.toLocaleLowerCase(), str.toLocaleUpperCase()
console.log('ABCDEFG'.toLocaleLowerCase()); // abcdefg console.log('abcdefg'.toLocaleUpperCase()); // ABCDEFG
toLowerCase & toUpperCase
这两个方法分别表示将字符串转换为相应的小写,大写形式,并返回
console.log('ABCDEFG'.toLowerCase()); // abcdefg console.log('abcdefg'.toUpperCase()); // ABCDEFG
toString & valueOf
这两个方法都是返回字符串本身。
语法:str.toString(), str.valueOf()
var str="abc"; console.log(str.toString()); // abc console.log(str.toString()==str.valueOf()); // true
对于对象而言,toString和valueOf也是非常的相似,它们之间有着细微的差别,请尝试运行以下一段代码:
var x={ toString: function () { return "test"; }, valueOf: function () { return 123; } }; console.log(x); // test console.log("x=" + x); // "x=123" console.log(x + "=x"); // "123=x" console.log(x + "1"); // 1231 console.log(x + 1); // 124 console.log(["x=", x].join("")); // "x=test"
当 “+” 操作符一边为数字时,对象x趋向于转换为数字,表达式会优先调用 valueOf 方法,如果调用数组的 join 方法,对象x趋向于转换为字符串,表达式会优先调用 toString 方法。
trim
trim() 方法清除字符串首尾的空白并返回。
语法:str.trim()
console.log(" a b c ".trim()); // "a b c"
trim() 方法是 ECMAScript 5.1 标准加入的,它并不支持IE9以下的低版本IE浏览器
if(!String.prototype.trim) { String.prototype.trim=function () { return this.replace(/^\s+|\s+$/g,''); }; }
codePointAt(ES6)
codePointAt() 方法基于ECMAScript 2015(ES6)规范,返回使用UTF-16编码的给定位置的值的非负整数。
语法:str.codePointAt(position)
console.log("a".codePointAt(0)); // 97 console.log("\u4f60\u597d".codePointAt(0)); // 20320
includes(ES6)
includes() 方法基于ECMAScript 2015(ES6)规范,它用来判断一个字符串是否属于另一个字符。如果是,则返回true,否则返回false。
语法:str.includes(subString [, position])
subString 表示要搜索的字符串,position 表示从当前字符串的哪个位置开始搜索字符串,默认值为0。
var str="Practice makes perfect."; console.log(str.includes("perfect")); // true console.log(str.includes("perfect",100)); // false
实际上,Firefox 18~39中该方法的名称为contains,由于bug 1102219的存在,它被重命名为includes() 。目前只有Chrome v41+和Firefox v40+版本浏览器实现了它,如需在其它版本浏览器中使用该方法,请参考 Polyfill。
endsWith(ES6)
endsWith() 方法基于ECMAScript 2015(ES6)规范,它基本与 contains() 功能相同,不同的是,它用来判断一个字符串是否是原字符串的结尾。若是则返回true,否则返回false。
语法:str.endsWith(substring [, position])
与contains 方法不同,position 参数的默认值为字符串长度。
var str="Learn and live."; console.log(str.endsWith("live.")); // true console.log(str.endsWith("Learn",5)); // true
startsWith(ES6)
startsWith() 方法基于ECMAScript 2015(ES6)规范,它用来判断当前字符串是否是以给定字符串开始的,若是则返回true,否则返回false。
语法:str.startsWith(subString [, position])
var str="Where there is a will, there is a way."; console.log(str.startsWith("Where")); // true console.log(str.startsWith("there",6)); // true
normalize(ES6)
normalize() 方法基于ECMAScript 2015(ES6)规范,它会按照指定的 Unicode 正规形式将原字符串正规化。
语法:str.normalize([form])
form 参数可省略,目前有四种 Unicode 正规形式,即 “NFC”、”NFD”、”NFKC” 以及 “NFKD”,form的默认值为 “NFC”。如果form 传入了非法的参数值,则会抛出 RangeError 错误。
var str="\u4f60\u597d"; console.log(str.normalize()); // 你好 console.log(str.normalize("NFC")); // 你好 console.log(str.normalize("NFD")); // 你好 console.log(str.normalize("NFKC")); // 你好 console.log(str.normalize("NFKD")); // 你好 function toUnicode(theString) { var unicodeString=''; for (var i=0; i < theString.length; i++) { var theUnicode=theString.charCodeAt(i).toString(16).toUpperCase(); while (theUnicode.length < 4) { theUnicode='0' + theUnicode; } theUnicode='\\u' + theUnicode; unicodeString +=theUnicode; } return unicodeString; } toUnicode('你好'); // "\u4f60\u597d"
repeat(ES6)
repeat() 方法基于ECMAScript 2015(ES6)规范,它返回重复原字符串多次的新字符串。
语法:str.repeat(count)
count 参数只能取大于等于0 的数字。若该数字不为整数,将自动转换为整数形式,若为负数或者其他值将报错。
var str="A still tongue makes a wise head."; console.log(str.repeat(0)); // "" console.log(str.repeat(1)); // A still tongue makes a wise head. console.log(str.repeat(1.5)); // A still tongue makes a wise head. console.log(str.repeat(-1)); // RangeError:Invalid count value
常用的方法有 anchor,link 其它方法如 big、blink、bold、fixed、fontcolor、fontsize、italics、small、strike、sub、sup均已废除。
接下来我们将介绍 anchor 和 link 两个方法,其他废除方法不作介绍。
anchor
anchor() 方法创建一个锚标签。
语法:str.anchor(name)
name 指定被创建的a标签的name属性,使用该方法创建的锚点,将会成为 document.anchors 数组的元素。
var str="this is a anchor tag"; document.body.innerHTML=document.body.innerHTML + str.anchor("anchor1"); // body末尾将会追加这些内容 <a name="anchor1">this is a anchor tag</a>
link
link() 方法同样创建一个a标签。
语法:str.link(url)
url 指定被创建的a标签的href属性,如果url中包含特殊字符,将自动进行编码。例如 " 会被转义为 &\quot。 使用该方法创建的a标签,将会成为 document.links 数组中的元素。
var str="百度"; document.write(str.link("https://www.baidu.com")); // <a href="https://www.baidu.com">百度</a>
小结
部分字符串方法之间存在很大的相似性,要注意区分他们的功能和使用场景。如:
substr 和 substring,都是两个参数,作用基本相同,两者第一个参数含义相同,但用法不同,前者可为负数,后者值为负数或者非整数时将隐式转换为0。前者第二个参数表示截取字符串的长度,后者第二个参数表示截取字符串的下标;同时substring第一个参数大于第二个参数时,执行结果同位置调换后的结果。 search方法与indexOf方法作用基本一致,都是查询到了就返回子串第一次出现的下标,否则返回-1,唯一的区别就在于search默认会将子串转化为正则表达式形式,而indexOf不做此处理,也不能处理正则。 另外,还记得吗?concat方法由于效率问题,不推荐使用。
通常,字符串中,常用的方法就charAt、indexOf、lastIndexOf、match、replace、search、slice、split、substr、substring、toLowerCase、toUpperCase、trim、valueof 等这些。熟悉它们的语法规则就能熟练地驾驭字符串
参考文章:
https://segmentfault.com/a/1190000010753942
https://segmentfault.com/a/1190000012688190
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。[响应一个键] onkeyup 在用户放开任何先前按下的键盘键时发生。 onkeydown 在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合,而onkeypress不能 onfocusout 失去光标事件 onfocus 获得光标事件 onabort 图片下载被打断时 onblur 元素失去焦点时 onclick 鼠标点击 ondblclick 鼠标双击 onerror 加载文档或图片发生错误时 onmousedown 鼠标被按下时 onmousemove 鼠标被移动时 onmouseout 鼠标离开元素时 onmouseover 鼠标经过元素时 onmouseup 释放鼠标按键时 onunload 用户离开页面时
100个原生JavaScript使用功能代码片段
目录
1.原生JavaScript实现字符串长度截取
2.原生JavaScript获取域名主机
3.原生JavaScript清除空格
4.原生JavaScript替换全部
5.原生JavaScript转义html标签
6.原生JavaScript还原html标签
7.原生JavaScript判断是否为数字类型
8.原生JavaScript时间日期格式转换
9.原生JavaScript设置cookie值
10.原生JavaScript获取cookie值
11.原生JavaScript加入收藏夹
12.原生JavaScript设为首页
13.原生JavaScript判断IE6
14.原生JavaScript加载样式文件
15.原生JavaScript返回脚本内容
16.原生JavaScript清除脚本内容
17.原生JavaScript动态加载脚本文件
18.原生JavaScript返回按ID检索的元素对象
19.原生JavaScript返回浏览器版本内容
20.原生JavaScript元素显示的通用方法
21.原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如函数实现
22.原生JavaScript中兼容浏览器绑定元素事件
23.原生JavaScript光标停在文字的后面,文本框获得焦点时调用
24.原生JavaScript检验URL链接是否有效
25.原生JavaScript格式化CSS样式代码
26.原生JavaScript压缩CSS样式代码
27.原生JavaScript获取当前路径
28.原生JavaScriptIP转成整型
29.原生JavaScript整型解析为IP地址
30.原生JavaScript实现checkbox全选与全不选
31.原生JavaScript判断是否移动设备
32.原生JavaScript判断是否移动设备访问
33.原生JavaScript判断是否苹果移动设备访问
34.原生JavaScript判断是否安卓移动设备访问
35.原生JavaScript判断是否Touch屏幕
36.原生JavaScript判断是否在安卓上的谷歌浏览器
37.原生JavaScript判断是否打开视窗
38.原生JavaScript获取移动设备初始化大小
39.原生JavaScript获取移动设备最大化大小
40.原生JavaScript获取移动设备屏幕宽度
41.原生JavaScript完美判断是否为网址
42.原生JavaScript根据样式名称检索元素对象
43.原生JavaScript判断是否以某个字符串开头
44.原生JavaScript判断是否以某个字符串结束
45.原生JavaScript返回IE浏览器的版本号
46.原生JavaScript获取页面高度
47.原生JavaScript获取页面scrollLeft
48.原生JavaScript获取页面可视宽度
49.原生JavaScript获取页面宽度
50.原生JavaScript获取页面scrollTop
51.原生JavaScript获取页面可视高度
52.原生JavaScript跨浏览器添加事件
53.原生JavaScript跨浏览器删除事件
54.原生JavaScript去掉url前缀
55.原生JavaScript随机数时间戳
56.原生JavaScript全角半角转换,iCase: 0全到半,1半到全,其他不转化
57.原生JavaScript确认是否键盘有效输入值
58.原生JavaScript获取网页被卷去的位置
59.原生JavaScript另一种正则日期格式化函数+调用方法
60.原生JavaScript时间个性化输出功能
61.原生JavaScript解决offsetX兼容性问题
62.原生JavaScript常用的正则表达式
63.原生JavaScript实现返回顶部的通用方法
64.原生JavaScript获得URL中GET参数值
65.原生JavaScript实现全选通用方法
66.原生JavaScript实现全部取消选择通用方法
67.原生JavaScript实现打开一个窗体通用方法
68.原生JavaScript判断是否为客户端设备
69.原生JavaScript获取单选按钮的值
70.原生JavaScript获取复选框的值
71.原生JavaScript判断是否为邮箱
72.原生JavaScript判断是否有列表中的危险字符
73.原生JavaScript判断字符串是否大于规定的长度
74.原生JavaScript判断字符串是为网址不区分大小写
75.原生JavaScript判断字符串是否为小数
76.原生JavaScript判断字符串是否为整数
77.原生JavaScript判断字符串是否为浮点数
78.原生JavaScript判断字符是否为A-Za-z英文字母
79.原生JavaScript判断字符串是否邮政编码
80.原生JavaScript判断字符是否空NULL
81.原生JavaScript用正则表达式提取页面代码中所有网址
82.原生JavaScript用正则表达式清除相同的数组(低效率)
83.原生JavaScript用正则表达式清除相同的数组(高效率)
84.原生JavaScript用正则表达式按字母排序,对每行进行数组排序
85.原生JavaScript字符串反序
86.原生JavaScript用正则表达式清除html代码中的脚本
87.原生JavaScript动态执行JavaScript脚本
88.原生JavaScript动态执行VBScript脚本
89.原生JavaScript实现金额大写转换函数
90.原生JavaScript常用的正则表达式大收集
91.原生JavaScript实现窗体改变事件resize的操作(兼容所以的浏览器)
92.原生JavaScript用正则清除空格分左右
93.原生JavaScript判断变量是否空值
94.原生JavaScript实现base64解码
95.原生JavaScript实现utf8解码
96.原生JavaScript获取窗体可见范围的宽与高
97.原生JavaScript判断IE版本号(既简洁.又向后兼容!)
98.原生JavaScript获取浏览器版本号
99.原生JavaScript半角转换为全角函数
100.原生JavaScript全角转换为半角函数
代码片段
function cutstr(str, len) { var temp; var icount=0; var patrn=/[^\x00-\xff]/; // 匹配双字节字符(包括汉字在内) var strren=""; for (var i=0; i < str.length; i++) { if (icount < len - 1) { temp=str.substr(i, 1); if (patrn.exec(temp)==null) { icount=icount + 1; } else { icount=icount + 2; } } else { break; } } return strre + "..."; }
function getHost(url) { var host="null"; if (typeof url==undefined || url===null) { url=window.location.href; } var regex=/^\w+\:\/\/([^\/]*).*/; var match=url.match(regex); if (typeof match !=undefined && match !=null) { host=match[1]; } return host; }
String.prototype.trim=function() { var reExtraSpace=/^\s*(.*?)\s+$/; return this.replace(reExtraSpace, "$1"); }
String.prototype.replaceAll=function(s1, s2) { return this.replace(new RegExp(s1, "gm"), s2); }
function HtmlEncode(text) { return text.replace(/&/g, '&') .replace(/\"/g, '"') .replace(/</g, '<') .replace(/>/g, '>'); }
function HtmlDecode(text) { return text.replace('&', /&/g) .replace('"', /\"/g) .replace('<', /</g) .replace('>', />/g); }
function isDigit(value) { var patrn=/^[0-9]*$/; if (patrn.exec(value)==null || value=="") { return false } else { return true } }
Date.prototype.Format=function(formatStr) { var str=formatStr; var Week=['日', '一', '二', '三', '四', '五', '六']; str=str.replace(/yyyy|YYYY/, this.getFullYear()); str=str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100)); str=str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)); str=str.replace(/M/g, (this.getMonth() + 1)); str=str.replace(/w|W/g, Week[this.getDay()]); str=str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()); str=str.replace(/d|D/g, this.getDate()); str=str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()); str=str.replace(/h|H/g, this.getHours()); str=str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()); str=str.replace(/m/g, this.getMinutes()); str=str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()); str=str.replace(/s|S/g, this.getSeconds()); return str }
function setCookie(name, value, Hours) { var d=new Date(); var offset=8; var utc=d.getTime() + (d.getTimezoneOffset() * 60000); var nd=utc + (3600000 * offset); var exp=new Date(nd); exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000); document.cookie=name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;" }
function getCookie(name) { var arr=document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr !=null) return unescape(arr[2]); return null }
function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sTitle) } catch(e) { try { window.sidebar.addPanel(sTitle, sURL, "") } catch(e) { alert("加入收藏失败,请使用Ctrl+D进行添加") } } }
function setHomepage() { if (document.all) { document.body.style.behavior='url(#default#homepage)'; document.body.setHomePage('http://***'); } else if (window.sidebar) { if (window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect") } catch(e) { alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true") } } var prefs=Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage', 'http://***') } }
var ua=navigator.userAgent.toLowerCase(); var isIE6=ua.indexOf("msie 6") > -1; if (isIE6) { try { document.execCommand("BackgroundImageCache", false, true) } catch(e) {} }
function LoadStyle(url) { try { document.createStyleSheet(url) } catch(e) { var cssLink=document.createElement('link'); cssLink.rel='stylesheet'; cssLink.type='text/css'; cssLink.href=url; var head=document.getElementsByTagName('head')[0]; head.appendChild(cssLink) } }
function evalscript(s) { if(s.indexOf('<script')==-1) return s; var p=/<script[^\>]*?>([^\x00]*?)<\/script>/ig; var arr=[]; while(arr=p.exec(s)) { var p1=/<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; var arr1=[]; arr1=p1.exec(arr[0]); if(arr1) { appendscript(arr1[1], '', arr1[2], arr1[3]); } else { p1=/<script(.*?)>([^\x00]+?)<\/script>/i; arr1=p1.exec(arr[0]); appendscript('', arr1[2], arr1[1].indexOf('reload=') !=-1); } } return s; }
function stripscript(s) { return s.replace(/<script.*?>.*?<\/script>/ig, ''); }
function appendscript(src, text, reload, charset) { var id=hash(src + text); if(!reload && in_array(id, evalscripts)) return; if(reload && $(id)) { $(id).parentNode.removeChild($(id)); } evalscripts.push(id); var scriptNode=document.createElement("script"); scriptNode.type="text/javascript"; scriptNode.id=id; scriptNode.charset=charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); try { if(src) { scriptNode.src=src; scriptNode.onloadDone=false; scriptNode.onload=function () { scriptNode.onloadDone=true; JSLOADED[src]=1; }; scriptNode.onreadystatechange=function () { if((scriptNode.readyState=='loaded' || scriptNode.readyState=='complete') && !scriptNode.onloadDone) { scriptNode.onloadDone=true; JSLOADED[src]=1; } }; } else if(text){ scriptNode.text=text; } document.getElementsByTagName('head')[0].appendChild(scriptNode); } catch(e) {} }
function $(id) { return !id ? null : document.getElementById(id); }
function browserVersion(types) { var other=1; for(i in types) { var v=types[i] ? types[i] : i; if(USERAGENT.indexOf(v) !=-1) { var re=new RegExp(v + '(\\/|\\s)([\\d\\.]+)', 'ig'); var matches=re.exec(USERAGENT); var ver=matches !=null ? matches[2] : 0; other=ver !==0 && v !='mozilla' ? 0 : other; }else { var ver=0; } eval('BROWSER.' + i + '=ver'); } BROWSER.other=other; }
function $(id) { return !id ? null : document.getElementById(id); } function display(id) { var obj=$(id); if(obj.style.visibility) { obj.style.visibility=obj.style.visibility=='visible' ? 'hidden' : 'visible'; } else { obj.style.display=obj.style.display=='' ? 'none' : ''; } }
function insertAfter(newChild, refChild) { var parElem=refChild.parentNode; if(parElem.lastChild==refChild){ refChild.appendChild(newChild); }else{ parElem.insertBefore(newChild, refChild.nextSibling); } }
function addEventSamp(obj, evt, fn){ if (obj.addEventListener) { obj.addEventListener(evt, fn, false); }else if(obj.attachEvent){ obj.attachEvent('on' + evt, fn); } }
function focusLast(){ var e=event.srcElement; var r=e.createTextRange(); r.moveStart('character',e.value.length); r.collapse(true); r.select(); }
function getUrlState(URL) { var xmlhttp=new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET", URL, false); try { xmlhttp.Send(); } catch(e) { } finally { var result=xmlhttp.responseText; if(result) { if(xmlhttp.Status==200){ return true; }else{ return false; } } else { return false; } } }
function formatCss(s){ //格式化代码 s=s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); s=s.replace(/;\s*;/g, ";"); //清除连续分号 s=s.replace(/\,[\s\.\#\d]*{/g, "{"); s=s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); s=s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); s=s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); return s; }
function yasuoCss (s) { //压缩代码 s=s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释 s=s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); s=s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理 s=s.replace(/;\s*;/g, ";"); //清除连续分号 s=s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白 return (s==null) ? "" : s[1]; }
var currentPageUrl=""; if (typeof this.href===undefined) { currentPageUrl=document.location.toString().toLowerCase(); } else { currentPageUrl=this.href.toString().toLowerCase(); }
function _ip2int(ip){ var num=0; ip=ip.split("."); num=Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); num=num >>> 0; return num; }
function _int2iP(num){ var str; var tt=new Array(); tt[0]=(num >>> 24) >>> 0; tt[1]=((num << 8) >>> 24) >>> 0; tt[2]=(num << 16) >>> 24; tt[3]=(num << 24) >>> 24; str=String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "." + String(tt[3]); return str; }
function checkAll() { var selectall=document.getElementById("selectall"); var allbox=document.getElementsByName("allbox"); if (selectall.checked) { for (var i=0; i < allbox.length; i++) { allbox[i].checked=true; } } else { for (var i=0; i < allbox.length; i++) { allbox[i].checked=false; } } }
function isMobile(){ if (typeof this._isMobile==='boolean'){ return this._isMobile; } var screenWidth=this.getScreenWidth(); var fixViewPortsExperiment=rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; var fixViewPortsExperimentRunning=fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase()==="new"); if(!fixViewPortsExperiment){ if(!this.isAppleMobileDevice()){ screenWidth=screenWidth/window.devicePixelRatio; } } var isMobileScreenSize=screenWidth < 600; var isMobileUserAgent=false; this._isMobile=isMobileScreenSize && this.isTouchScreen(); return this._isMobile; }
function isMobileUserAgent() { return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase())); }
function isAppleMobileDevice() { return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase())); }
function isAndroidMobileDevice(){ return (/android/i.test(navigator.userAgent.toLowerCase())); }
function isTouchScreen() { return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); }
function isNewChromeOnAndroid(){ if(this.isAndroidMobileDevice()){ var userAgent=navigator.userAgent.toLowerCase(); if((/chrome/i.test(userAgent))){ var parts=userAgent.split('chrome/'); var fullVersionString=parts[1].split(" ")[0]; var versionString=fullVersionString.split('.')[0]; var version=parseInt(versionString); if(version >=27){ return true; } } } return false; }
function isViewportOpen() { return !!document.getElementById('wixMobileViewport'); }
function getInitZoom() { if(!this._initZoom) { var screenWidth=Math.min(screen.height, screen.width); if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()) { screenWidth=screenWidth / window.devicePixelRatio; } this._initZoom=screenWidth /document.body.offsetWidth; } return this._initZoom; }
function getZoom(){ var screenWidth=(Math.abs(window.orientation)===90) ? Math.max(screen.height, screen.width) : Math.min(screen.height, screen.width); if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ screenWidth=screenWidth/window.devicePixelRatio; } var FixViewPortsExperiment=rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; var FixViewPortsExperimentRunning=FixViewPortsExperiment && (FixViewPortsExperiment==="New" || FixViewPortsExperiment==="new"); if(FixViewPortsExperimentRunning){ return screenWidth / window.innerWidth; }else{ return screenWidth / document.body.offsetWidth; } }
function getScreenWidth(){ var smallerSide=Math.min(screen.width, screen.height); var fixViewPortsExperiment=rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; var fixViewPortsExperimentRunning=fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase()==="new"); if(fixViewPortsExperiment){ if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ smallerSide=smallerSide/window.devicePixelRatio; } } return smallerSide; }
function IsURL(strUrl) { var regular=/^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i if (regular.test(strUrl)) { return true; } else { return false; } }
function getElementsByClassName(name) { var tags=document.getElementsByTagName('*') || document.all; var els=[]; for (var i=0; i < tags.length; i++) { if (tags[i].className) { var cs=tags[i].className.split(' '); for (var j=0; j < cs.length; j++) { if (name==cs[j]) { els.push(tags[i]); break; } } } } return els; }
String.prototype.startWith=function (s) { return this.indexOf(s)==0; }
String.prototype.endWith=function (s) { var d=this.length - s.length; return (d >=0 && this.lastIndexOf(s)==d); }
function getIE(){ if (window.ActiveXObject){ var v=navigator.userAgent.match(/MSIE ([^;]+)/)[1]; return parseFloat(v.substring(0, v.indexOf("."))); } return false; }
function getPageHeight() { var g=document, a=g.body, f=g.documentElement, d=g.compatMode=="BackCompat" ? a : g.documentElement; return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight); }
function getPageScrollLeft(){ var a=document; return a.documentElement.scrollLeft || a.body.scrollLeft; }
function getPageViewWidth(){ var d=document, a=d.compatMode=="BackCompat" ? d.body : d.documentElement; return a.clientWidth; // 可视宽度为clientWidth }
// 考虑带滚动条的全部宽度 function getPageWidth(){ var g=document, a=g.body, f=g.documentElement, d=g.compatMode=="BackCompat" ? a : g.documentElement; return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth); }
function getPageScrollTop(){ var a=document; return a.documentElement.scrollTop || a.body.scrollTop; }
function getPageViewHeight() { var d=document, a=d.compatMode=="BackCompat" ? d.body : d.documentElement; return a.clientHeight; }
function addEvt(oTarget, sEvtType, fnHandle) { if(!oTarget) {return;} if(oTarget.addEventListener) { oTarget.addEventListener(sEvtType, fnHandle, false); } else if(oTarget.attachEvent) { oTarget.attachEvent("on" + sEvtType, fnHandle); } else { oTarget["on" + sEvtType]=fnHandle; } }
function delEvt(oTarget, sEvtType, fnHandle){ if(!oTarget) {return;} if(oTarget.addEventListener) { oTarget.addEventListener(sEvtType,fnHandle,false); } else if(oTarget.attachEvent) { oTarget.attachEvent("on" + sEvtType,fnHandle); } else { oTarget["on" + sEvtType]=fnHandle; } }
function removeUrlPrefix(a) { a=a.replace(/:/g,":").replace(/./g,".").replace(///g,"/"); while(trim(a).toLowerCase().indexOf("http://")==0) { a=trim(a.replace(/http:\/\//i,"")); } return a; }
function uniqueId() { var a=Math.random, b=parseInt; return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a()); }
function chgCase(sStr,iCase){ if(typeof sStr !="string" || sStr.length <=0 || !(iCase===0 || iCase==1)){ return sStr; } var i,oRs=[],iCode; if(iCase){/*半->全*/ for(i=0; i<sStr.length;i+=1){ iCode=sStr.charCodeAt(i); if(iCode==32){ iCode=12288; }else if(iCode < 127){ iCode +=65248; } oRs.push(String.fromCharCode(iCode)); } }else{/*全->半*/ for(i=0; i<sStr.length;i+=1){ iCode=sStr.charCodeAt(i); if(iCode==12288){ iCode=32; }else if(iCode > 65280 && iCode < 65375){ iCode -=65248; } oRs.push(String.fromCharCode(iCode)); } } return oRs.join(""); }
function checkKey(iKey){ if(iKey==32 || iKey==229){return true;} /*空格和异常*/ if(iKey>47 && iKey < 58){return true;} /*数字*/ if(iKey>64 && iKey < 91){return true;} /*字母*/ if(iKey>95 && iKey < 108){return true;} /*数字键盘1*/ if(iKey>108 && iKey < 112){return true;} /*数字键盘2*/ if(iKey>185 && iKey < 193){return true;} /*符号1*/ if(iKey>218 && iKey < 223){return true;} /*符号2*/ return false; }
function getScrollXY() { return document.body.scrollTop ? { x: document.body.scrollLeft, y: document.body.scrollTop }: { x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop } }
Date.prototype.format=function(format) { // author: meizz var o={ "M+" : this.getMonth() + 1, // month "d+" : this.getDate(), // day "h+" : this.getHours(), // hour "m+" : this.getMinutes(), // minute "s+" : this.getSeconds(), // second "q+" : Math.floor((this.getMonth() + 3) / 3), // quarter "S" : this.getMilliseconds() // millisecond } if(/(y+)/.test(format)) { format=format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o)if(new RegExp("("+ k +")").test(format)) { format=format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } return format; } alert(new Date().format("yyyy-MM-dd hh:mm:ss"));
/* 1、< 60s, 显示为“刚刚” 2、>=1min && < 60 min, 显示与当前时间差“XX分钟前” 3、>=60min && < 1day, 显示与当前时间差“今天 XX:XX” 4、>=1day && < 1year, 显示日期“XX月XX日 XX:XX” 5、>=1year, 显示具体日期“XXXX年XX月XX日 XX:XX” */ function timeFormat(time){ var date=new Date(time) , curDate=new Date() , year=date.getFullYear() , month=date.getMonth() + 1 , day=date.getDate() , hour=date.getHours() , minute=date.getMinutes() , curYear=curDate.getFullYear() , curHour=curDate.getHours() , timeStr; if(year < curYear){ timeStr=year +'年'+ month +'月'+ day +'日 '+ hour +':'+ minute; }else{ var pastTime=curDate - date , pastH=pastTime/3600000; if(pastH > curHour){ timeStr=month +'月'+ day +'日 '+ hour +':'+ minute; }else if(pastH >=1){ timeStr='今天 ' + hour +':'+ minute +'分'; }else{ var pastM=curDate.getMinutes() - minute; if(pastM > 1){ timeStr=pastM +'分钟前'; }else{ timeStr='刚刚'; } } } return timeStr; }
// 针对火狐不支持offsetX/Y function getOffset(e) { var target=e.target, // 当前触发的目标对象 eventCoord, pageCoord, offsetCoord; // 计算当前触发元素到文档的距离 pageCoord=getPageCoord(target); // 计算光标到文档的距离 eventCoord={ X : window.pageXOffset + e.clientX, Y : window.pageYOffset + e.clientY }; // 相减获取光标到第一个定位的父元素的坐标 offsetCoord={ X : eventCoord.X - pageCoord.X, Y : eventCoord.Y - pageCoord.Y }; return offsetCoord; } function getPageCoord(element) { var coord={ X : 0, Y : 0 }; // 计算从当前触发元素到根节点为止, // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和 while (element){ coord.X +=element.offsetLeft; coord.Y +=element.offsetTop; element=element.offsetParent; } return coord; }
//正整数 /^[0-9]*[1-9][0-9]*$/; //负整数 /^-[0-9]*[1-9][0-9]*$/; //正浮点数 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; //负浮点数 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //浮点数 /^(-?\d+)(\.\d+)?$/; //email地址 /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; //url地址 /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/; //年/月/日(年-月-日、年.月.日) /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/; //匹配中文字符 /[\u4e00-\u9fa5]/; //匹配帐号是否合法(字母开头,允许5-10字节,允许字母数字下划线) /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/; //匹配空白行的正则表达式 /\n\s*\r/; //匹配中国邮政编码 /[1-9]\d{5}(?!\d)/; //匹配身份证 /\d{15}|\d{18}/; //匹配国内电话号码 /(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/; //匹配IP地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/; //匹配首尾空白字符的正则表达式 /^\s*|\s*$/; //匹配HTML标记的正则表达式 < (\S*?)[^>]*>.*?|< .*? />;
function backTop(btnId) { var btn=document.getElementById(btnId); var d=document.documentElement; var b=document.body; window.onscroll=set; btn.style.display="none"; btn.onclick=function() { btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function() { d.scrollTop -=Math.ceil((d.scrollTop + b.scrollTop) * 0.1); b.scrollTop -=Math.ceil((d.scrollTop + b.scrollTop) * 0.1); if ((d.scrollTop + b.scrollTop)==0) clearInterval(btn.timer, window.onscroll=set); }, 10); }; function set() { btn.style.display=(d.scrollTop + b.scrollTop > 100) ? 'block': "none"; } }; backTop('goTop');
// 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET["t1"], GET["t2"], GET["t3"] function get_get() { querystr=window.location.href.split("?"); if(querystr[1]) { var GETs=querystr[1].split("&"), GET=new Array(); for(i=0; i < GETs.length; i++){ tmp_arr=GETs[i].split("="); key=tmp_arr[0]; GET[key]=tmp_arr[1]; } } return querystr[1]; }
function checkall(form, prefix, checkall) { var checkall=checkall ? checkall : 'chkall'; for(var i=0; i < form.elements.length; i++) { var e=form.elements[i]; if(e.type=="checkbox"){ e.checked=form.elements[checkall].checked; } } }
function uncheckAll(form) { for (var i=0; i < form.elements.length; i++){ var e=form.elements[i]; if (e.name !='chkall') e.checked=!e.checked; } }
function openWindow(url,windowName,width,height){ var x=parseInt(screen.width / 2.0) - (width / 2.0); var y=parseInt(screen.height / 2.0) - (height / 2.0); var isMSIE=(navigator.appName=="Microsoft Internet Explorer"); if (isMSIE) { var p="resizable=1,location=no,scrollbars=no,width="; p=p+width; p=p+",height="; p=p+height; p=p+",left="; p=p+x; p=p+",top="; p=p+y; retval=window.open(url, windowName, p); } else { var win=window.open(url, "ZyiisPopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" ); eval("try { win.resizeTo(width, height); } catch(e) { }"); win.focus(); } }
function client(o){ var b=navigator.userAgent.toLowerCase(); var t=false; if (o=='isOP'){ t=b.indexOf('opera') > -1; } if (o=='isIE'){ t=b.indexOf('msie') > -1; } if (o=='isFF'){ t=b.indexOf('firefox') > -1; } return t; }
function get_radio_value(field){ if(field && field.length){ for(var i=0; i < field.length; i++){ if(field[i].checked){ return field[i].value; } } }else { return; } }
function get_checkbox_value(field) { if(field && field.length){ for(var i=0; i < field.length; i++){ if(field[i].checked && !field[i].disabled){ return field[i].value; } } } else { return; } }
function isEmail(str){ var re=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if (re.test(str) !=true) { return false; }else{ return true; } }
function isValidReg(chars){ var re=/<|>|\[|\]|\{|\}|『|』|※||||§|||||||□||㊣|﹋|⊕|⊙|〒|ㄅ|ㄆ|ㄇ|ㄈ|ㄉ|ㄊ|ㄋ|ㄌ|ㄍ|ㄎ|ㄏ|ㄐ|ㄑ|ㄒ|ㄓ|ㄔ|ㄕ|ㄖ|ㄗ|ㄘ|ㄙ|ㄚ|ㄛ|ㄜ|ㄝ|ㄞ|ㄟ|ㄢ|ㄣ|ㄤ|ㄥ|ㄦ|ㄧ|ㄨ|ㄩ|■|▄|▆|\*|@|#|\^|\\/; if (re.test( chars)==true) { return false; }else{ return true; } }
function isValidLength(chars, len) { if (chars.length < len) { return false; } return true; }
function isValidURL( chars ) { var re=/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(\S+\.\S+)$/; if (!isNULL(chars)) { chars=jsTrim(chars); if (chars.match(re)==null) return false; else return true; } return false; }
function isValidDecimal( chars ) { var re=/^\d*\.?\d{1,2}$/; if (chars.match(re)==null) return false; else return true; }
function isNumber(chars) { var re=/^\d*$/; if (chars.match(re)==null) return false; else return true; }
function isFloat(str) { for(i=0;i<str.length;i++) { if((str.charAt(i)<"0" || str.charAt(i)>"9")&& str.charAt(i) !='.') { return false; } } return true; }
function isLetters(str) { var re=/^[A-Za-z]+$/; if (str.match(re)==null) return false; else return true; }
function isValidPost( chars ) { var re=/^\d{6}$/; if (chars.match(re)==null) return false; else return true; }
function isNULL( chars ) { if (chars==null) return true; if (jsTrim(chars).length==0) return true; return false; }
var aa=document.documentElement.outerHTML.match(/(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/ig).join("\r\n").replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/igm,""); alert(aa);
Array.prototype.unique=function() { return this.reverse().join(",").match(/([^,]+)(?!.*\1)/ig).reverse(); }
String.prototype.unique=function() { var x=this.split(/[\r\n]+/); var y=''; for(var i=0; i < x.length; i++){ if(!new RegExp("^"+x[i].replace(/([^\w])/ig,"\\$1")+"$","igm").test(y)) { y +=x[i]+"\r\n"; } } return y; }
function SetSort(){ var text=K1.value.split(/[\r\n]/).sort().join("\r\n"); // 顺序 var test=K1.value.split(/[\r\n]/).sort().reverse().join("\r\n"); // 反序 K1.value=(K1.value !=text) ? text : test; }
function IsReverse(text) { return text.split('').reverse().join(''); }
function clear_script() { K1.valu e=K1.value.replace(/<script.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\s+on[a-zA-Z]{3,16}\s?=[^ >]+/ig,""); }
function javascript(){ try{ eval(K1.value); }catch(e){ alert(e.message); } }
function vbscript() { try{ var script=document.getElementById("K1").value; if(script.trim()=="") return; window.execScript('On Error Resume Next \n'+script+'\n If Err.Number<>0 Then \n MsgBox "请输入正确的VBScript脚本!",48,"脚本错误!" \n End If',"vbscript") } catch(e) { alert(e.message); } }
function transform(tranvalue) { try { var i=1; var dw2=new Array("", "万", "亿"); //大单位 var dw1=new Array("拾", "佰", "仟"); //小单位 var dw=new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用 //以下是小写转换成大写显示在合计大写的文本框中 //分离整数与小数 var source=splits(tranvalue); var num=source[0]; var dig=source[1]; //转换整数部分 var k1=0; //计小单位 var k2=0; //计大单位 var sum=0; var str=""; var len=source[0].length; //整数的长度 for (i=1; i <=len; i++) { var n=source[0].charAt(len - i); //取得某个位数上的数字 var bn=0; if (len - i - 1 >=0) { bn=source[0].charAt(len - i - 1); //取得某个位数前一位上的数字 } sum=sum + Number(n); if (sum !=0) { str=dw[Number(n)].concat(str); //取得该数字对应的大写数字,并插入到str字符串的前面 if (n=='0') sum=0; } if (len - i - 1 >=0) { //在数字范围内 if (k1 !=3) { //加小单位 if (bn !=0) { str=dw1[k1].concat(str); } k1++; } else { //不加小单位,加大单位 k1=0; var temp=str.charAt(0); if (temp=="万" || temp=="亿") //若大单位前没有数字则舍去大单位 str=str.substr(1, str.length - 1); str=dw2[k2].concat(str); sum=0; } } if (k1==3) //小单位到千则大单位进一 { k2++; } } //转换小数部分 var strdig=""; if (dig !="") { var n=dig.charAt(0); if (n !=0) { strdig +=dw[Number(n)] + "角"; //加数字 } var n=dig.charAt(1); if (n !=0) { strdig +=dw[Number(n)] + "分"; //加数字 } } str +="元" + strdig; } catch(e) { return "0元"; } return str; } //拆分整数与小数 function splits(tranvalue) { var value=new Array('', ''); temp=tranvalue.split("."); for (var i=0; i < temp.length; i++) { value[i]=temp[i]; } return value; }
匹配中文字符的正则表达式: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内):[^\x00-\xff] 匹配空行的正则表达式:\n[\s| ]*\r 匹配 HTML 标记的正则表达式:<(.*)>.*<\/\1>|<(.*) \/> 匹配首尾空格的正则表达式:(^\s*)|(\s*$) 匹配 IP 地址的正则表达式:/(\d+)\.(\d+)\.(\d+)\.(\d+)/g 匹配 Email 地址的正则表达式:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 匹配网址 URL 的正则表达式:http://(/[\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)? sql 语句:^(select|drop|delete|create|update|insert).*$ 非负整数:^\d+$ 正整数:^[0-9]*[1-9][0-9]*$ 非正整数:^((-\d+)|(0+))$ 负整数:^-[0-9]*[1-9][0-9]*$ 整数:^-?\d+$ 非负浮点数:^\d+(\.\d+)?$ 正浮点数:^((0-9)+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$ 非正浮点数:^((-\d+\.\d+)?)|(0+(\.0+)?))$ 英文字符串:^[A-Za-z]+$ 英文大写串:^[A-Z]+$ 英文小写串:^[a-z]+$ 英文字符数字串:^[A-Za-z0-9]+$ 英数字加下划线串:^\w+$ E-mail地址:^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$ URL:^[a-zA-Z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\s*)?$ 或:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$ 邮政编码:^[1-9]\d{5}$ 电话号码:^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$ 手机号码:^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$ 双字节字符(包括汉字在内):^\x00-\xff 匹配首尾空格:(^\s*)|(\s*$) 匹配 HTML 标记:<(.*)>.*<\/\1>|<(.*) \/> 匹配空行:\n[\s| ]*\r 提取信息中的网络链接:(h|H)(r|R)(e|E)(f|F) *=*('|")?(\w|\\|\/|\.)+('|"| *|>)? 提取信息中的邮件地址:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 提取信息中的图片链接:(s|S)(r|R)(c|C) *=*('|")?(\w|\\|\/|\.)+('|"| *|>)? 提取信息中的 IP 地址:(\d+)\.(\d+)\.(\d+)\.(\d+) 提取信息中的中国手机号码:(86)*0*13\d{9} 提取信息中的中国固定电话号码:(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8} 提取信息中的中国电话号码(包括移动和固定电话):(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14} 提取信息中的中国邮政编码:[1-9]{1}(\d+){5} 提取信息中的浮点数(即小数):(-?\d*)\.?\d+ 提取信息中的任何数字 :(-?\d*)(\.\d+)? IP:(\d+)\.(\d+)\.(\d+)\.(\d+) 电话区号:^0\d{2,3}$ 腾讯 QQ 号:^[1-9]*[1-9][0-9]*$ 帐号(字母开头,允许 5-16 字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 中文、英文、数字及下划线:^[\u4e00-\u9fa5_a-zA-Z0-9]+$
(function(){ var fn=function(){ var w=document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth ,r=1255 ,b=Element.extend(document.body) ,classname=b.className; if(w < r){ // 当窗体的宽度小于1255的时候执行相应的操作 }else{ // 当窗体的宽度大于1255的时候执行相应的操作 } } if(window.addEventListener){ window.addEventListener('resize', function(){ fn(); }); }else if(window.attachEvent){ window.attachEvent('onresize', function(){ fn(); }); } fn(); })();
function ltrim(s){ return s.replace( /^(\s*| *)/, ""); } function rtrim(s){ return s.replace( /(\s*| *)$/, ""); } function trim(s){ return ltrim(rtrim(s)); }
/** * 判断变量是否空值 * undefined, null, '', false, 0, [], {} 均返回true,否则返回false */ function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if(trim(v).length==0) return true; break; case 'boolean' : if(!v) return true; break; case 'number' : if(0===v) return true; break; case 'object' : if(null===v) return true; if(undefined !==v.length && v.length==0) return true; for(var k in v){return false;} return true; break; } return false; }
function base64_decode(data){ var b64="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var o1, o2, o3, h1, h2, h3, h4, bits, i=0,ac=0,dec="",tmp_arr=[]; if (!data) { return data; } data +=''; do { h1=b64.indexOf(data.charAt(i++)); h2=b64.indexOf(data.charAt(i++)); h3=b64.indexOf(data.charAt(i++)); h4=b64.indexOf(data.charAt(i++)); bits=h1 << 18 | h2 << 12 | h3 << 6 | h4; o1=bits >> 16 & 0xff; o2=bits >> 8 & 0xff; o3=bits & 0xff; if (h3==64) { tmp_arr[ac++]=String.fromCharCode(o1); } else if (h4==64) { tmp_arr[ac++]=String.fromCharCode(o1, o2); } else { tmp_arr[ac++]=String.fromCharCode(o1, o2, o3); } } while (i < data.length); dec=tmp_arr.join(''); dec=utf8_decode(dec); return dec; }
95, 原生JavaScript实现utf8解码
function utf8_decode(str_data){ var tmp_arr=[],i=0,ac=0,c1=0,c2=0,c3=0;str_data +=''; while (i < str_data.length) { c1=str_data.charCodeAt(i); if (c1 < 128) { tmp_arr[ac++]=String.fromCharCode(c1); i++; } else if (c1 > 191 && c1 < 224) { c2=str_data.charCodeAt(i + 1); tmp_arr[ac++]=String.fromCharCode(((c1 & 31) << 6) | (c2 & 63)); i +=2; } else { c2=str_data.charCodeAt(i + 1); c3=str_data.charCodeAt(i + 2); tmp_arr[ac++]=String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i +=3; } } return tmp_arr.join(''); }
function getViewSize() { var de=document.documentElement; var db=document.body; var viewW=de.clientWidth==0 ? db.clientWidth : de.clientWidth; var viewH=de.clientHeight==0 ? db.clientHeight : de.clientHeight; return Array(viewW ,viewH); }
var _IE=(function(){ var v=3, div=document.createElement('div'), all=div.getElementsByTagName('i'); while ( div.innerHTML='<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); return v > 4 ? v : false ; }());
function browserVersion(types) { var other=1; for (i in types) { var v=types[i] ? types[i] : i; if (USERAGENT.indexOf(v) !=-1) { var re=new RegExp(v + '(\\/|\\s|:)([\\d\\.]+)', 'ig'); var matches=re.exec(USERAGENT); var ver=matches !=null ? matches[2] : 0; other=ver !==0 && v !='mozilla' ? 0 : other; } else { var ver=0; } eval('BROWSER.' + i + '=ver'); } BROWSER.other=other; }
function ToDBC(str){ var result=''; for(var i=0; i < str.length; i++){ code=str.charCodeAt(i); if(code >=33 && code <=126){ result +=String.fromCharCode(str.charCodeAt(i) + 65248); }else if (code==32){ result +=String.fromCharCode(str.charCodeAt(i) + 12288 - 32); }else{ result +=str.charAt(i); } } return result; }
篇是接着上一篇“Python系列(14)”接下来的对于字符串的使用介绍,最好这2篇一起看,是比较系统的对于字符串知识点的部分。
Python 支持格式化字符串的输出 。尽管这样可能会用到非常复杂的表达式,但最基本的用法是将一个值插入到一个有字符串格式符 %s 的字符串中。
在 Python 中,字符串格式化使用与 C 中 sprintf 函数一样的语法。
如下实例:
print "My name is %s and weight is %d kg!" % ('Zara', 21)
以上实例输出结果:
My name is Zara and weight is 21 kg!
上面代码中的%s,可以记s为string(字符串)的首字母,代表的是格式化替换字符串类型的数据
python字符串格式化符号:
格式化操作符辅助指令:
Python2.6 开始,新增了一种格式化字符串的函数 str.format(),它增强了字符串格式化的功能。下一篇文章将对此字符串的函数 str.format()进行详细介绍。
python中三引号可以将复杂的字符串进行复制:
python三引号允许一个字符串跨多行,字符串中可以包含换行符、制表符以及其他特殊字符。
三引号的语法是一对连续的单引号或者双引号(通常都是成对的用)。
>>> hi='''hi
there'''
>>> hi
'hi\nthere'
>>> print hi
hi
there
三引号让程序员从引号和特殊字符串的泥潭里面解脱出来,自始至终保持一小块字符串的格式是所谓的WYSIWYG(所见即所得)格式的。
一个典型的用例是,当你需要一块HTML或者SQL时,这时用字符串组合,特殊字符串转义将会非常的繁琐。
老铁们,大佬们,今天就给大家介绍到这里啦~~有兴趣的可以加关注或点赞转发给朋友哟~【爱他(她)就让他(她)去搬砖吧】
敬请期待~~你我一同进步!!!有任何问题皆可留言询问~~谢各位大佬关注!!
*请认真填写需求信息,我们会在24小时内与您取得联系。