By welkin

Updated:

Contents

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

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

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

##String.fromCharCode()：根据编码值返回字符
在这里提一下主要字符的编码值：

##0 ~ 9：48 ~ 57

##a ~ z：97 ~ 122

##A ~ Z：65 ~ 90

##注意：若用charAt()监测一个不存在的字符，则返回值为空；即超出为空。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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()函数能根据编码值返回字符的功能改变其编码值来进行加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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：从右往左找

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

1
2
3
4
5
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

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

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

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

###法一,for

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

###法二、while

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

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

####注意：如果第2个值为负数，默认当成0来处理

#四、比较类，截取类，substring应用实例
字符串比较时，先比较第一个字符，再比较后边的字符

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

##substring截取字符串函数

1
2
3
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对段落文章的展开和收缩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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有些差异

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

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

###toUpperCase()：转成大写

###toLowerCase()：转成小写

###split()：分割字符串

1
2
3
var str = 'www.miaov.com';
var arr = str.split( '.' );//根据点进行分割
//arr = [ 'www', 'miaov', 'com' ];

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

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

###join：将数组变为字符串

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

Contents