Javascript字符串方法总结

一、字符串获取类,封装监测数字的方法

charAt():根据下标返回字符串

charCodeAt():根据下标返回字符串编码

String.fromCharCode():根据编码值返回字符

在这里提一下主要字符的编码值:

0 ~ 9:48 ~ 57

a ~ z:97 ~ 122

A ~ Z:65 ~ 90

注意:若用charAt()监测一个不存在的字符,则返回值为空;即超出为空。

可用编码值来判断输入字符是否为数字

<body>

<input type="text" />
<input type="button" value="检测" />

<script>


var aInp = document.getElementsByTagName('input');

aInp[1].onclick = function () {

    var val = aInp[0].value;

    if ( detectNum(val) ) {
        alert( '恭喜,'+ val +'全是数字' );
    } else {
        alert('输入有误');
    }
};

function detectNum ( str ) {
    var n = 0;
    for ( var i=0; i<str.length; i++ ) {
        n = str.charCodeAt(i);
        if ( n<48 || n>57 )return false;
    }
    return true;
}

</script>

</body>

二、String.fromCharCode()返回字符串实例,字符串加密

可利用String.fromCharCode()函数能根据编码值返回字符的功能改变其编码值来进行加密

<body>

<input type="text" />
<input type="button" value="加密" />
<div id="div1">加密...</div>

<script>
var aInp = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');

aInp[1].onclick = function () {
    var str = aInp[0].value;        
    var str1 = '';
    for ( var i=0; i<str.length; i++ ) {
        str1 += String.fromCharCode(str.charCodeAt(i)-520);
         //该数字可根据自己喜好改变
    }
    oDiv.innerHTML = str1;
};
</script>

</body>

三、indexOf和lastIndexOf

indexOf:从左往右找

lastIndexOf:从右往左找

原始若要找一个字符在字符串所在的位置,则需要写循环

for ( var i=0; i<str.length; i++ ) {
    if ( str.charAt(i) === 'i' ) {
        alert(i);
    }
}

而现在可利用函数进行查找

var str = ‘www.miaov.com/2013ww’;
alert( str.indexOf(‘m’) );//4
str.indexOf(‘m’, 5)//代表从第str[5]开始往后找 //12
alert( str.indexOf(‘X’) ); //-1,返回-1表示没有找到
alert( str.indexOf(‘ww’, 2) );//找到符合的之后,返回第一个w出现的位置//18

对于下面一段字符串,可用两种循环找到其位置

var str = '妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!';

var s = '妙味';
var i = 0;

法一,for

for( ; str.indexOf( s, i ) != -1 ; ){
    alert( str.indexOf( s, i ) );
    i = str.indexOf( s, i ) + s.length;
}

法二、while

while( str.indexOf( s, i ) != -1 ){
    alert( str.indexOf( s, i ) );
    i = str.indexOf( s, i ) + s.length;
}

同理对于lastIndexOf,只不过是字符串的右边往左找,返回的位置和从左往右的值是一样的

注意:如果第2个值为负数,默认当成0来处理

四、比较类,截取类,substring应用实例

字符串比较时,先比较第一个字符,再比较后边的字符

alert( 'abbbbb' > 'b' );  //false
alert( '10000' > '2' );   //false
alert( '10000' > 2 );   //true

substring截取字符串函数

var str = '妙味课堂是一支独具特色的IT培训团队';
alert( str.substring(0,2) );   //妙味
alert( str.substring(2,0) );     //妙味

注意:substring可以检测两个数,大的往后扔,小的往前扔

str.substring(0) == str.substring()//全部被截取

alert( str.substring(-3, 2) ); //妙味,-3当做0来处理
alert( str.substring(2, -3) ); //妙味

利用substring对段落文章的展开和收缩

<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; margin:40px auto 0; }
</style>

<script>

window.onload = function () {
    var oP = document.getElementsByTagName('p')[0];
    var oSpan = oP.getElementsByTagName('span')[0];
    var oA = oP.getElementsByTagName('a')[0];
    var str = oSpan.innerHTML;
    var onOff = true;

    oA.onclick = function () {
        if ( onOff ) {
            oSpan.innerHTML = str.substring(0, 18);
            oA.innerHTML = '>>展开';
        } else {
            oSpan.innerHTML = str;
            oA.innerHTML = '>>收缩';
        }
        onOff = !onOff;
    };
};

</script>

</head>

<body>

<p><span>妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!<br />2013年底,妙味课堂最新推出“远程培训”服务,受到很多朋友们的喜爱与追捧,我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p>

</body>

slice();也是字符串截取函数,但性质和substring有些差异

var str = '妙味课堂是一支独具特色的IT培训团队';
 alert( str.slice( 0,2) );  //从0开始截取两个字符,即妙味
alert( str.slice( 2, 0 ) ); //无输出,即不交换位置
alert( str.slice( -4, -2 ) );   // 负数从后面倒着往前数(从头蹿到尾找),即培训       

五、大小写转换,split()分割字符串

toUpperCase():转成大写

toLowerCase():转成小写

split():分割字符串

var str = 'www.miaov.com';
var arr = str.split( '.' );//根据点进行分割
//arr = [ 'www', 'miaov', 'com' ];
var str1 = 'leo';
str1.split('') ;    //根据单个字符进行分割
//str1 = [ 'l', 'e', 'o' ]
var str2 = '妙味课堂';
 alert( str2.split('味') );//根据味进行分割
//str2 = [‘妙‘,’课堂‘]
var str3 = '/www.miaov.com/';
 alert( str3.split('/'));   //根据/分割 
// [ , www.miaov.com,  ]
var str4 = '2013-11-29-23-07';
alert( str4.split('-', 3) );    
//根据-分割,但只保留数组前三位

六、高亮显示关键字实例,替换搜索关键字实例

join:将数组变为字符串

var arr = [ 'aa', 'bb', 'cc' ];
arr.join('+')            //   aa+bb+cc
 arr.join('-')             //aa-bb-cc

可利用join性质和split性质对文章段落进行查找,类似word文档一样

<body>

<input type="text" />
<input type="text" />
<input type="button" value="替换" />

<p>妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!<br />
2013年底,妙味课堂最新推出"远程培训"服务,受到很多朋友们的喜爱与追捧,我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>

<script>
var aInp = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];

aInp[2].onclick = function () {
    var str = aInp[0].value;            // '妙味'
    var newStr = aInp[1].value;

    if (!str)return;

    oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');
};

</script>

</body>

猜你喜欢

转载自blog.csdn.net/welkin_qing/article/details/81200759