字符串方法之-indexOf、lastIndexOf、等等一些方法

时间:2023-01-07 10:35:30

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'