妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1、数字字母
Unicode 编码
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6 <script>
7 var str = '妙味课堂';
8 // alert( str.length ); //字符串长度 提示为4
9 // alert( str.charAt() ); //默认找到第一个字 妙
10 // alert( str.charCodeAt() ); // 妙 的Unicode 编码22937
11 // alert( str.charCodeAt(1) ); // 味的Unicode 编码21619
12 // alert( str.charCodeAt() ); // 0~9 编码 48~57 a~z 编码 97~122 A~Z 编码 65~90
13
14 alert( String.fromCharCode(22937, 21619) ); //根据数字生成字符
15 </script>
16 </head>
17 <body>
18 </body>
19 </html>
2、字符加密练习
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="text" />
9 <input type="button" value="加密" />
10 <div id="div1">加密...</div>
11 <script>
12 var aInp = document.getElementsByTagName('input');
13 var oDiv = document.getElementById('div1');
14 aInp[1].onclick=function(){
15 var str=aInp[0].value;
16 var str1='';
17 for(var i=0;i<str.length;i++){
18 str1 += String.fromCharCode(str.charCodeAt(i)-520); //自己设定的减去520
19 }
20 oDiv.innerHTML = str1;
21 }
22 </script>
23 </body>
24 </html>
3、检测是不是数字的方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="text">
9 <input type="button" value="检测">
10 <script>
11 window.onload=function(){
12 var aInput=document.getElementsByTagName('input');
13 aInput[1].onclick=function(){
14 var val=aInput[0].value;
15 if(detectNum(val)){
16 alert("你输入的是数字")
17 }else{
18 alert("你输入的不是数字")
19 }
20 }
21 function detectNum(str){
22 var n=0;
23 for(var i=0;i<str.length;i++){
24 n=str.charCodeAt(i);
25 if(n<48||n>57){
26 return false;
27 }
28 }
29 return true;
30 }
31 }
32 </script>
33 </body>
34 </html>
4、字符串比较
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <script>
9 // alert( '杜'.charCodeAt() ); 获取该字的Unicode编码
10
11 // alert( '莫涛' > '杜鹏' );
12
13 // alert( 'abbbbb' > 'b' ); 比较第一位
14
15 alert( '10000' > '2' ); //false
16
17 </script>
18 </body>
19 </html>
5、字符串查找 indexof lastindexof
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script>
var str = 'www.miaov.com/2013ww';
/*
for ( var i=0; i<str.length; i++ ) {
if ( str.charAt(i) === 'i' ) {
alert(i);
}
}
*/
// alert( str.indexOf('m') ); //4 第四位
// alert( str.indexOf('m', 5) ); //从第5位开始找 找到m在第12位
// alert( str.indexOf('X') ); // -1 表示没找到
alert( str.indexOf('ww', 2) );
</script>
</body>
</html>
6、一段话中找文字对应的位数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str ='妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！';
var s = '妙味';
var i = 0;
// for( ; str.indexOf( s, i ) != -1 ; ){
// alert( str.indexOf( s, i ) );
// i = str.indexOf( s, i ) + s.length;
// }
//
// while( str.indexOf( s, i ) != -1 ){
// alert( str.indexOf( s, i ) );
// i = str.indexOf( s, i ) + s.length;
// }
str.indexOf('妙味', 2) // 从左往右找
// alert( str.lastIndexOf('妙味', 38) );
// 如果第2个值为负数，默认当成0来处理
</script>
</body>
</html>
7、字符串截取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var str = '妙味课堂是一支独具特色的IT培训团队';
// alert(str.substring(4)) //从第四位截取，显示后面的
// alert( str.substring(0,2) ); //只截取了妙味
// alert( str.substring(2,0) ); // 可以检测两个数，大的往后扔，小的往前扔
// alert( str.substring(-3, 2) ); // -3 当成0处理
// alert( str.substring(2, -3) );
// alert( str.slice( 2, 0 ) ); // 不交换位置 空
alert( str.slice( -4, -2 ) ); // 负数从后面倒着往前数~ -1开始 包含-4
</script>
</body>
</html>
8、文字收缩展开
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>无标题文档</title>
6
7 <style>
8 p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; margin:40px auto 0; }
9 </style>
10
11 <script>
12
13 window.onload = function () {
14 var oP = document.getElementsByTagName('p')[0];
15 var oSpan = oP.getElementsByTagName('span')[0];
16 var oA = oP.getElementsByTagName('a')[0];
17 var str = oSpan.innerHTML;
18 var onOff = true;
19
20 oA.onclick = function () {
21 if ( onOff ) {
22 oSpan.innerHTML = str.substring(0, 18);
23 oA.innerHTML = '>>展开';
24 } else {
25 oSpan.innerHTML = str;
26 oA.innerHTML = '>>收缩';
27 }
28 onOff = !onOff;
29 };
30 };
31
32 </script>
33
34 </head>
35
36 <body>
37
38 <p><span>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />2013年底，妙味课堂最新推出“远程培训”服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p>
39
40 </body>
41 </html>
9、字符串转化为大小写
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var str = 'www.MIAOV.com';
// alert( str.toUpperCase() ); // 转成大写
alert( str.toLowerCase() ); // 转成小写
</script>
</head>
<body>
<div id="div1" onclick="alert( this.innerHTML.toUpperCase() );"><p>这是一段文字</p></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var str = 'www.MIAOV.com';
// alert( str.toUpperCase() ); // 转成大写
alert( str.toLowerCase() ); // 转成小写
</script>
</head>
<body>
<div id="div1" onclick="alert( this.innerHTML.toUpperCase() );"><p>这是一段文字</p></div>
</body>
</html>
10、字符串分割成数组
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var str = 'www.miaov.com';
// alert( typeof str.split('.') ); // [ 'www', 'miaov', 'com' ]
var arr = str.split( '.' );
// alert( arr[1] );
var str1 = 'leo';
// alert( typeof str1.split() ); // [ 'leo' ]
// alert( str1.split('') ); // [ 'l', 'e', 'o' ]
var str2 = '妙味课堂';
// alert( str2.split('味') );
var str3 = '/www.miaov.com/';
// alert( str3.split('/').length ); // [ , www.miaov.com, ]
var str4 = '2013-11-29-23-07';
alert( str4.split('-', 3) ); //
</script>
</head>
<body>
</body>
</html>
11、文字查找替换
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
span { background:yellow; }
</style>
</head>
<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>
</html>
12、练习
<!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'
// alert( arr.join().length );
// alert( arr.join('') );
alert( arr.join('-') );
</script>
</body>
</html>
13、查找替换例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>查找替换3</title> 6 <style type="text/css"> 7 p,dl,dt,dd,ul,li,input{margin:0;padding:0;} 8 li{list-style:none;} 9 a{text-decoration:none;} 10 #box{border:1px solid #ccc;width:634px;padding:20px;background:#efefe7;position:relative; margin: 30px auto;} 11 p{font-size:16px;line-height:30px;width:460px;height:210px;background:#fff;padding:20px;font-family:"微软雅黑";} 12 dl{width:80px;height:120px;position:absolute;top:20px;right:60px;} 13 dt,dl{font-size:16px;color:#fff;text-align:center;font-family:"微软雅黑";} 14 dt{height:38px;background:#808080;line-height:38px;} 15 dd{height:40px;background:#c0c0c0;line-height:40px;margin-top:1px;display:none;} 16 #toolBox{width:460px;height:106px;border:10px solid #e71063;margin-top:10px;padding:20px 20px 0;position:relative;display:none;background:#e7e7b5;} 17 ul{border-bottom:2px solid #e73100;zoom:1;} 18 .clear:after{content:"";display:block;clear:both;} 19 li{width:78px;height:32px;text-align:center;line-height:32px;font-size:16px;color:#000;float:left;font-family:"微软雅黑"} 20 .active{background:#e73100;color:#fff;} 21 #toolBox .look, #toolBox .replace{border:none;margin-top:22px;position:absolute;} 22 .replace{display:none;} 23 a, a:visited{color:#000;font-family:Arial;position:absolute;top:8px;right:8px;} 24 input{width:180px;height:26px;border:1px solid #c0c0c0;margin-right:12px;line-height:26px;} 25 p span{background:#ff0;} 26 .on{background: darkred} 27 </style> 28 </head> 29 <body> 30 <div id="box"> 31 <p>秒味课堂是一支充满温馨并且极富人情味的IT团队；2010~2011年，秒味深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的JavaScript课程。2011~2013年，秒味精准研发出最新HTML5\CSS3课程，并推出远程培训课堂方案，尝试将线下优良的培训模式移植到远程网络培训中，希望尽最大努力，将一种快乐愉悦的授课体验、结合HTML\CSS\JS知识点，精准传递给秒味课堂的每一位学员。</p> 32 <dl> 33 <dt>展开</dt> 34 <dd>查找</dd> 35 <dd>替换</dd> 36 </dl> 37 <div id="toolBox"> 38 <ul class="clear"> 39 <li class="active">查找</li> 40 <li>替换</li> 41 </ul> 42 <a href="#">X</a> 43 <div class="look"> 44 <input type="text" /> 45 <button id="lookBtn">查找</button> 46 </div> 47 <div class="replace"> 48 <input type="text" /> 49 <input type="text" /> 50 <button id="replaceBtn">替换</button> 51 </div> 52 </div> 53 </div> 54 <script type="text/javascript"> 55 window.onload = function(){ 56 var oDt = document.getElementsByTagName('dt')[0]; 57 var oDd = document.getElementsByTagName('dd'); 58 var oToolBox = document.getElementById('toolBox'); 59 var aLi = document.getElementsByTagName('li'); 60 var aDiv = oToolBox.getElementsByTagName('div'); 61 var oLookBtn = document.getElementById('lookBtn'); 62 var oReplaceBtn = document.getElementById('replaceBtn'); 63 var aInp = oToolBox.getElementsByTagName('input'); 64 var oP = document.getElementsByTagName('p')[0]; 65 var oA = document.getElementsByTagName('a')[0]; 66 var str = ''; 67 68 //展开模块功能 69 oDt.onclick = function(){ 70 for(var i=0;i<oDd.length;i++){ 71 oDd[i].style.display = 'block'; 72 } 73 74 for(var i=0;i<oDd.length;i++){ 75 oDd[i].index = i; 76 oDd[i].onclick = function(){ 77 oToolBox.style.display = 'block'; 78 var _this = this; 79 showTab(_this); 80 } 81 } 82 83 //ToolBox功能模块 84 for(var i=0;i<aLi.length;i++){ 85 aLi[i].index = i; 86 aLi[i].onclick = function(){ 87 var _this = this; 88 showTab(_this); 89 } 90 } 91 92 function showTab(that){ 93 for(var i=0;i<oDd.length;i++){ 94 oDd[i].style.background = "#c0c0c0"; 95 aDiv[i].style.display = "none"; 96 aLi[i].style.background = '#e7e7b5'; 97 aLi[i].style.color = '#000'; 98 aDiv[i].style.display = "none"; 99 } 100 oDd[that.index].style.background = "#e73100"; 101 aDiv[that.index].style.display = 'block'; 102 aLi[that.index].style.background = '#e73100'; 103 aLi[that.index].style.color = '#fff'; 104 aDiv[that.index].style.display = 'block'; 105 for(var i=0;i<aInp.length;i++){ 106 aInp[i].value = ''; 107 } 108 } 109 110 //OA关闭搜索栏 111 oA.onclick = function(){ 112 oToolBox.style.display = 'none'; 113 114 for(var i=0;i<oDd.length;i++){ 115 oDd[i].style.display = 'none'; 116 } 117 } 118 119 120 //查找功能 121 oLookBtn.onOff = true; 122 oLookBtn.onclick = function(){ 123 oReplaceBtn.onOff = true; 124 125 if(this.onOff){ 126 str = oP.innerHTML; 127 this.onOff = false; 128 } 129 var oLstr = str; 130 131 if(aInp[0].value.search(/^\s*$/)){ 132 if(oP.innerHTML.indexOf(aInp[0].value) == -1){ 133 alert('没有匹配的字符串'); 134 }else{ 135 oP.innerHTML = oLstr.split(aInp[0].value).join('<span>'+aInp[0].value+'</span>'); 136 } 137 138 }else{ 139 alert('请输入要查找的字符串!'); 140 } 141 } 142 143 //替换功能 144 oReplaceBtn.onOff = true; 145 oReplaceBtn.onclick = function(){ 146 147 oLookBtn.onOff = true; 148 if(this.onOff){ 149 var str1 = (str === '')? oP.innerHTML : str; 150 this.onOff = false; 151 }else{ 152 str1 = oP.innerHTML; 153 } 154 155 if(aInp[1].value.search(/^\s*$/) ){ 156 if(oP.innerHTML.indexOf(aInp[1].value) == -1){ 157 158 alert('没有找的要替换字符串'); 159 160 }else if((oP.innerHTML.indexOf(aInp[1].value) != -1 ) && (aInp[2].value == '')){ 161 162 oP.innerHTML = str1.split(aInp[1].value).join('<span>'+aInp[1].value+'</span>'); 163 164 var conf = confirm('您确定要删除\【'+aInp[1].value+'\】吗？'); 165 if(conf){ 166 oP.innerHTML = str1.split(aInp[1].value).join(''); 167 aInp[1].value = ''; 168 }else{ 169 oP.innerHTML = str1; 170 } 171 172 }else{ 173 174 oP.innerHTML = str1.split(aInp[1].value).join(aInp[2].value); 175 176 } 177 178 }else{ 179 return false; 180 } 181 182 } 183 184 185 }; 186 187 188 189 190 } 191 192 </script> 193 </body> 194 </html>
