<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <script> //字符串 var str = '妙味课堂 '; alert( str.length );//5，空格也是 alert( str.charAt() );//不写是第0个 alert( str.charCodeAt() ); // 妙的Unit编码22937，电脑存的不是汉字是Unit码值 alert( str.charCodeAt(1) ); // 21619 alert( str.charCodeAt() ); // 0~9 48~57 a~z 97~122 A~Z 65~90 alert( String.fromCharCode(22937, 21619) );//获取汉字，String的静态方法， </script> <input type="text" /> <input type="button" value="检测" /> <script> //只能输入数字 //alert( detectNum('123456') ); 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> <script> /* document.body.innerHTML = String.fromCharCode(22937); document.body.innerHTML += String.fromCharCode(21619); */ var str = ''; for ( var i=10000; i<20000; i++ ) { str += String.fromCharCode(i) + ' '; } document.body.innerHTML = str; </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <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 = ''; // alert( str.charCodeAt(0) ); for ( var i=0; i<str.length; i++ ) { str1 += String.fromCharCode(str.charCodeAt(i)-520); } oDiv.innerHTML = str1; }; </script> <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') ); alert( str.indexOf('m', 5) );//从下标5开始找 alert( str.indexOf('X') ); // -1 表示没找到 alert( str.indexOf('ww', 2) ); //第一次出现的位置 </script> <script> var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！'; var s = '妙味'; var i = 0; for( ; str.indexOf( s, i ) != -1 ; ){//indexOf()只找一次，返回第一次的位置 alert( str.indexOf( s, i ) ); i = str.indexOf( s, i ) + s.length; } while( str.indexOf( s, i ) != -1 ){//找到最后没有就是-1就退出 alert( str.indexOf( s, i ) ); i = str.indexOf( s, i ) + s.length; } </script> <script> var str = '妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！'; str.indexOf('妙味', 2) // 从左往右找 alert( str.lastIndexOf('妙味', 38) ); // 如果第2个值为负数，默认当成0来处理 </script> <script> alert( '杜'.charCodeAt() ); alert( '莫涛' > '杜鹏' ); alert( 'abbbbb' > 'b' ); alert( '10000' > '2' ); </script> <script> var str = '妙味课堂是一支独具特色的IT培训团队'; alert( str.substring(4) );//从下标4开始截取 alert( str.substring(0) );//从0开始全部截取 alert( str.substring(1,2) );//1开始截取到下标为2，包头不包为 alert( str.substring(2,0) );// 同str.substring(0,2)可以检测两个数，大的往后扔，小的往前扔 alert( str.substring(-3, 2) ); // -3 当成0处理 alert( str.substring(2, -3) ); //同str.substring(-3, 2) alert( str.slice( 2, 3 ) ); //下标2到下标3，包头不包尾， alert( str.slice( 2, 0 ) ); // 不自动交换位置，什么都没有 alert( str.slice( -2 ) );//团队，队是-1，团是-2，-2开始后面截取完 alert( str.slice( -4, -2 ) );//培训，陪是-4，训是-3，团是-2，对是-1，从左往右找，包头不包尾。 </script> </body> </html>
<!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; 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> </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> <script> var str = 'www.miaov.com'; alert( typeof str.split('.') );//object [ '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) );// 只保留数组前面3个元素 </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { 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() ); //数组每一个元素拼在一起成字符串，什么参数也不写则加逗号，string类型，'aa'+','+'bb'+','+'cc' alert( arr.join().length );//8 'aa,bb,cc' alert( arr.join('') );//'aa'+'bb'+'cc' alert( arr.join('-') ); </script> </body> </html>
<!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; 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;//文本框没内容，str是null， oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');//显通过str分割成数组，再通过newStr拼接成字符串 }; </script> </body> </html>
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'); // 'wwwaaamiaovaaacom'