字符串方法之-indexOf、lastIndexOf、等等一些方法
1、indexOf()：方法可返回某个指定的字符串值在字符串中首次出现的位置（从左往右找）。
语法：stringObject.indexOf(searchvalue,fromindex)
1 <script> 2 3 var str = 'www.miaov.com/2013ww'; 4 5 /* 6 for ( var i=0; i<str.length; i++ ) { 7 if ( str.charAt(i) === 'i' ) { 8 alert(i); 9 } 10 } 11 //原始查找字符串位置的方法 12 */ 13 14 // alert( str.indexOf('m') ); 15 // alert( str.indexOf('m', 5) ); 16 // alert( str.indexOf('X') ); // -1 表示没找到 17 18 alert( str.indexOf('ww', 2) ); 19 20 21 22 </script>
2、查找字符串出现多个地方的位置（索引）
1 <script> 2 3 var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！'; 4 5 var s = '妙味'; 6 var i = 0; 7 /* 8 for( ; str.indexOf( s, i ) != -1 ; ){ 9 alert( str.indexOf( s, i ) ); 10 i = str.indexOf( s, i ) + s.length; 11 } 12 */ 13 while( str.indexOf( s, i ) != -1 ){ 14 alert( str.indexOf( s, i ) ); 15 i = str.indexOf( s, i ) + s.length; 16 } 17 18 </script>
3、lastIndexOf()：从右往左找，用法跟indexOf()一样；
4、比大小，字符串比大小，转成Unicode 编码再比较
1 <script> 2 3 // alert( '杜'.charCodeAt() ); 4 5 // alert( '莫涛' > '杜鹏' ); //true 6 7 // alert( 'abbbbb' > 'b' ); //false 8 9 alert( '10000' > '2' ); //false 10 alert( '10000' > 2 ); //true 11 12 </script>
5、substring()：提取字符串中两个指定的索引号之间的字符。（substring() 不接受负的参数。）
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
语法：stringObject.slice(start,end) 其中start， end可以为负数
eg：
1 <script> 2 3 var str = '妙味课堂是一支独具特色的IT培训团队'; 4 5 // alert( str.substring(0,2) ); 6 // alert( str.substring(2,0) ); // 可以检测两个数，大的往后扔，小的往前扔 结果同上一行 7 // alert( str.substring(-3, 2) ); // -3 当成0处理 8 // alert( str.substring(2, -3) ); //以上结果都为 => 妙味 9 10 // alert( str.slice( 2, 0 ) ); // 不交换位置 找不到结果 11 alert( str.slice( -4, -2 ) ); // 负数从后面倒着往前数~ => 培训 12 13 </script>
6、简单小例子（实现展开收缩功能）
1 <style> 2 p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; margin:40px auto 0; } 3 </style> 4 5 <script> 6 7 window.onload = function () { 8 var oP = document.getElementsByTagName('p')[0]; 9 var oSpan = oP.getElementsByTagName('span')[0]; 10 var oA = oP.getElementsByTagName('a')[0]; 11 var str = oSpan.innerHTML; 12 var onOff = true; 13 14 oA.onclick = function () { 15 if ( onOff ) { 16 oSpan.innerHTML = str.substring(0, 18); 17 oA.innerHTML = '>>展开'; 18 } else { 19 oSpan.innerHTML = str; 20 oA.innerHTML = '>>收缩'; 21 } 22 onOff = !onOff; 23 }; 24 }; 25 26 </script> 27 28 </head> 29 30 <body> 31 32 <p><span>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />2013年底，妙味课堂最新推出“远程培训”服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p> 33 34 </body>
6、toUpperCase()：转成大写
7、toLowerCase()：转成小写
用法：stringObject.toUpperCase();
8、toLocaleLowerCase() 方法用于把字符串转换为小写。
9、toLocaleUpperCase() 方法用于把字符串转换为大写。
语法：stringObject.toLocaleLowerCase();
10、slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分（分隔成数组）。
语法：stringObject.slice(start,end);
返回值：一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
eg、
1 <script> 2 3 var str = 'www.miaov.com'; 4 // alert( typeof str.split('.') ); // [ 'www', 'miaov', 'com' ] 5 var arr = str.split( '.' ); 6 // alert( arr[1] ); 7 8 var str1 = 'leo'; 9 // alert( typeof str1.split() ); // [ 'leo' ] 10 11 // alert( str1.split('') ); // [ 'l', 'e', 'o' ] 12 13 var str2 = '妙味课堂'; 14 15 // alert( str2.split('味') ); 16 17 var str3 = '/www.miaov.com/'; 18 19 // alert( str3.split('/').length ); // [ , www.miaov.com, ] =>3 20 21 var str4 = '2013-11-29-23-07'; 22 23 alert( str4.split('-', 3) ); // ['2013', '11', '29'] 24 25 </script>
11、小例子：
注意join() 方法用于把数组中的所有元素放入一个字符串。与silce()方法相反。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; } span { padding:5px 15px; font-family:微软雅黑; } </style> </head> <body> <div id="div1"> <!-- <span style="background:#FFC;">文</span><span style="background:#CC3;">字</span><span style="background:#6FC;">内</span><span style="background:#9C9;">容</span> --> </div> <input type="text" /> <input type="button" value="按钮" /> <script> var oDiv = document.getElementById('div1'); var aInp = document.getElementsByTagName('input'); var arrColor = [ '#FFC', '#CC3', '#6FC', '#9C9' ]; aInp[1].onclick = function () { var str = aInp[0].value; // '妙味课堂' var arr = str.split(''); // [ '妙', '味', '课', '堂' ]（分隔成数组） for ( var i=0; i<arr.length; i++ ) { arr[i] = '<span style="background:' + arrColor[i%arrColor.length] + ';">' + arr[i] + '</span>'; } oDiv.innerHTML += arr.join(''); //妙味课堂（数组再转为字符串） }; var arr = [ 'aa', 'bb', 'cc' ]; // alert( typeof arr.join() ); 等于做连接 'aa'+','+'bb'+','+'cc' string // alert( arr.join().length ); // =>8 // alert( arr.join('') ); alert( arr.join('-') ); </script> </body> </html>
12、小例子：
1 <style> 2 p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; } 3 span { background:yellow; } 4 </style> 5 6 </head> 7 8 <body> 9 10 <input type="text" /> 11 <input type="text" /> 12 <input type="button" value="替换" /> 13 14 <p>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br /> 15 2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p> 16 17 <script> 18 var aInp = document.getElementsByTagName('input'); 19 var oP = document.getElementsByTagName('p')[0]; 20 21 aInp[2].onclick = function () { 22 var str = aInp[0].value; // '妙味' （文本框里面出来的都是字符串） 23 var newStr = aInp[1].value; 24 25 if (!str)return; 26 27 oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>'); 28 }; 29 30 </script>
总结：
var str = '妙味课堂-WWW.miaov.com';
str.charAt(1); // '味'
str.charCodeAt(1); // 21619
String.fromCharCode(22937, 21619); // '妙味'
str.indexOf('m', 4); // 9
str.lastIndexOf('o'); // 16
'1000' < '2' // true
'1000' > 2 // true
str.substring(0, 4); // '妙味课堂'
str.slice(-3); // 'com'
str.toUpperCase(); // '妙味课堂-WWW.MIAOV.COM'
str.toLowerCase(); // '妙味课堂-www.miaov.com'
str.split('.', 2); // [ '妙味课堂-WWW', 'miaov' ]
var arr = [ 'www', 'miaov', 'com' ];
arr.join('aaa'); // 'www.miaov.com'