js02---字符串

<!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; 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>
</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 { 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() );    //数组每一个元素拼在一起成字符串，什么参数也不写则加逗号，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; 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;//文本框没内容，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'

posted @ 2017-05-09 04:43 无天666 阅读(280) 评论(0) 收藏举报

刷新页面返回顶部

672530440

js02---字符串

公告