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

時間 2019-12-12

標籤字符串方法 indexof lastindexof 等等一些简体版

原文原文鏈接

一、indexOf()：方法可返回某個指定的字符串值在字符串中首次出現的位置（從左往右找）。javascript

語法：stringObject.indexOf(searchvalue,fromindex)html

 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>

二、查找字符串出現多個地方的位置（索引）java

 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>

三、lastIndexOf()：從右往左找，用法跟indexOf()同樣；數組

四、比大小，字符串比大小，轉成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>

五、substring()：提取字符串中兩個指定的索引號之間的字符。（substring() 不接受負的參數。）ui

　　slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。編碼

　　語法：stringObject.slice(start,end) 其中start， end能夠爲負數spa

eg：code

 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>

六、簡單小例子（實現展開收縮功能）htm

 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>

六、toUpperCase()：轉成大寫

七、toLowerCase()：轉成小寫

用法：stringObject.toUpperCase();

八、toLocaleLowerCase() 方法用於把字符串轉換爲小寫。

九、toLocaleUpperCase() 方法用於把字符串轉換爲大寫。

語法：stringObject.toLocaleLowerCase();

十、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>

十一、小例子：

注意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>

十二、小例子：

 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); // 21619String.fromCharCode(22937, 21619); // '妙味'str.indexOf('m', 4); // 9str.lastIndexOf('o'); // 16'1000' < '2' // true'1000' > 2 // truestr.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'

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。