zoukankan      html  css  js  c++  java
  • 字符串方法之-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'

  • 相关阅读:
    matrix
    meizi
    公文流转系统
    10.21连接数据库进行添加
    9.27
    9.23课堂总结
    信息管理java
    大道至简读后感
    第二周
    7.7第一周
  • 原文地址:https://www.cnblogs.com/wxydigua/p/3745687.html
Copyright © 2011-2022 走看看