1、数字字母

Unicode 编码
 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
var str = '妙味课堂';
// alert( str.length ); //字符串长度 提示为4
// alert( str.charAt() ); //默认找到第一个字 妙
// alert( str.charCodeAt() ); // 妙 的Unicode 编码22937
// alert( str.charCodeAt(1) ); // 味的Unicode 编码21619
// alert( str.charCodeAt() ); // 0~9 编码 48~57 a~z 编码 97~122 A~Z 编码 65~90 alert( String.fromCharCode(22937, 21619) ); //根据数字生成字符
</script>
</head>
<body>
</body>
</html>

2、字符加密练习

 <!DOCTYPE html>
<html lang="en">
<head>
<meta 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='';
for(var i=0;i<str.length;i++){
str1 += String.fromCharCode(str.charCodeAt(i)-520); //自己设定的减去520
}
oDiv.innerHTML = str1;
}
</script>
</body>
</html>

3、检测是不是数字的方法

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text">
<input type="button" value="检测">
<script>
window.onload=function(){
var aInput=document.getElementsByTagName('input');
aInput[1].onclick=function(){
var val=aInput[0].value;
if(detectNum(val)){
alert("你输入的是数字")
}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>
</html>

4、字符串比较


 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// alert( '杜'.charCodeAt() ); 获取该字的Unicode编码 // alert( '莫涛' > '杜鹏' ); // alert( 'abbbbb' > 'b' ); 比较第一位 alert( '10000' > '2' ); //false </script>
</body>
</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、文字收缩展开


 <!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>

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、查找替换例子

 
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查找替换3</title>
<style type="text/css">
p,dl,dt,dd,ul,li,input{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
#box{border:1px solid #ccc;width:634px;padding:20px;background:#efefe7;position:relative; margin: 30px auto;}
p{font-size:16px;line-height:30px;width:460px;height:210px;background:#fff;padding:20px;font-family:"微软雅黑";}
dl{width:80px;height:120px;position:absolute;top:20px;right:60px;}
dt,dl{font-size:16px;color:#fff;text-align:center;font-family:"微软雅黑";}
dt{height:38px;background:#808080;line-height:38px;}
dd{height:40px;background:#c0c0c0;line-height:40px;margin-top:1px;display:none;}
#toolBox{width:460px;height:106px;border:10px solid #e71063;margin-top:10px;padding:20px 20px 0;position:relative;display:none;background:#e7e7b5;}
ul{border-bottom:2px solid #e73100;zoom:1;}
.clear:after{content:"";display:block;clear:both;}
li{width:78px;height:32px;text-align:center;line-height:32px;font-size:16px;color:#000;float:left;font-family:"微软雅黑"}
.active{background:#e73100;color:#fff;}
#toolBox .look, #toolBox .replace{border:none;margin-top:22px;position:absolute;}
.replace{display:none;}
a, a:visited{color:#000;font-family:Arial;position:absolute;top:8px;right:8px;}
input{width:180px;height:26px;border:1px solid #c0c0c0;margin-right:12px;line-height:26px;}
p span{background:#ff0;}
.on{background: darkred}
</style>
</head>
<body>
<div id="box">
<p>秒味课堂是一支充满温馨并且极富人情味的IT团队;2010~2011年,秒味深度关注WEB前端开发领域,为此精心研发出一套灵活而充满趣味的JavaScript课程。2011~2013年,秒味精准研发出最新HTML5\CSS3课程,并推出远程培训课堂方案,尝试将线下优良的培训模式移植到远程网络培训中,希望尽最大努力,将一种快乐愉悦的授课体验、结合HTML\CSS\JS知识点,精准传递给秒味课堂的每一位学员。</p>
<dl>
<dt>展开</dt>
<dd>查找</dd>
<dd>替换</dd>
</dl>
<div id="toolBox">
<ul class="clear">
<li class="active">查找</li>
<li>替换</li>
</ul>
<a href="#">X</a>
<div class="look">
<input type="text" />
<button id="lookBtn">查找</button>
</div>
<div class="replace">
<input type="text" />
<input type="text" />
<button id="replaceBtn">替换</button>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oDt = document.getElementsByTagName('dt')[0];
var oDd = document.getElementsByTagName('dd');
var oToolBox = document.getElementById('toolBox');
var aLi = document.getElementsByTagName('li');
var aDiv = oToolBox.getElementsByTagName('div');
var oLookBtn = document.getElementById('lookBtn');
var oReplaceBtn = document.getElementById('replaceBtn');
var aInp = oToolBox.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];
var oA = document.getElementsByTagName('a')[0];
var str = ''; //展开模块功能
oDt.onclick = function(){
for(var i=0;i<oDd.length;i++){
oDd[i].style.display = 'block';
} for(var i=0;i<oDd.length;i++){
oDd[i].index = i;
oDd[i].onclick = function(){
oToolBox.style.display = 'block';
var _this = this;
showTab(_this);
}
} //ToolBox功能模块
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
var _this = this;
showTab(_this);
}
} function showTab(that){
for(var i=0;i<oDd.length;i++){
oDd[i].style.background = "#c0c0c0";
aDiv[i].style.display = "none";
aLi[i].style.background = '#e7e7b5';
aLi[i].style.color = '#000';
aDiv[i].style.display = "none";
}
oDd[that.index].style.background = "#e73100";
aDiv[that.index].style.display = 'block';
aLi[that.index].style.background = '#e73100';
aLi[that.index].style.color = '#fff';
aDiv[that.index].style.display = 'block';
for(var i=0;i<aInp.length;i++){
aInp[i].value = '';
}
} //OA关闭搜索栏
oA.onclick = function(){
oToolBox.style.display = 'none'; for(var i=0;i<oDd.length;i++){
oDd[i].style.display = 'none';
}
} //查找功能
oLookBtn.onOff = true;
oLookBtn.onclick = function(){
oReplaceBtn.onOff = true; if(this.onOff){
str = oP.innerHTML;
this.onOff = false;
}
var oLstr = str; if(aInp[0].value.search(/^\s*$/)){
if(oP.innerHTML.indexOf(aInp[0].value) == -1){
alert('没有匹配的字符串');
}else{
oP.innerHTML = oLstr.split(aInp[0].value).join('<span>'+aInp[0].value+'</span>');
} }else{
alert('请输入要查找的字符串!');
}
} //替换功能
oReplaceBtn.onOff = true;
oReplaceBtn.onclick = function(){ oLookBtn.onOff = true;
if(this.onOff){
var str1 = (str === '')? oP.innerHTML : str;
this.onOff = false;
}else{
str1 = oP.innerHTML;
} if(aInp[1].value.search(/^\s*$/) ){
if(oP.innerHTML.indexOf(aInp[1].value) == -1){ alert('没有找的要替换字符串'); }else if((oP.innerHTML.indexOf(aInp[1].value) != -1 ) && (aInp[2].value == '')){ oP.innerHTML = str1.split(aInp[1].value).join('<span>'+aInp[1].value+'</span>'); var conf = confirm('您确定要删除\【'+aInp[1].value+'\】吗?');
if(conf){
oP.innerHTML = str1.split(aInp[1].value).join('');
aInp[1].value = '';
}else{
oP.innerHTML = str1;
} }else{ oP.innerHTML = str1.split(aInp[1].value).join(aInp[2].value); } }else{
return false;
} } }; } </script>
</body>
</html>

												

妙味课堂:JavaScript初级--第11课:字符串、查找高亮显示的更多相关文章

  1. 妙味课堂:JavaScript初级--第12课:json与数组

    1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  2. 妙味课堂——JavaScript基础课程笔记

    集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...

  3. 妙味课堂——HTML+CSS(第四课)(二)

    单开一篇来讲一个大点的话题——清浮动    来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...

  4. 妙味课堂——HTML+CSS(第四课)(一)

    这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...

  5. 妙味课堂——HTML+CSS(第三课)

    常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...

  6. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  7. 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  8. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  9. 妙味课堂——HTML+CSS(第二课)

    常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...

随机推荐

  1. phpcms网站搬家 至 服务器 完整并且详细过程

    上传服务器空间后,才会通过搜索域名进行网页访问. 上传的过程肯定会有很多东西要修改,例如数据库怎么上传.路径怎么修改等..... 这就让大家看下,自己不断尝试后的完整搬家步骤!!! 一.上传服务器 ( ...

  2. UWP 调用outlook邮箱反馈

    public static async Task FeedbackAsync(string address, string subject, string body) { if (address == ...

  3. 关于promise的详细讲解

    到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读 ...

  4. bitcms内容管理系统 3.1版源码发布

    开源bitcms内容管理系统采用ASP.NET MVC5+MySql的组合开发,更适应中小型系统低成本运行. bitcms的主要功能 1.重写了APS.NET MVC的路由机制.bitcms使用路由参 ...

  5. ArrayList在foreach正常迭代删除不报错的原因

    一.背景 在以前的随笔中说道过ArrayList的foreach迭代删除的问题:ArrayList迭代过程删除问题 按照以前的说法,在ArrayList中通过foreach迭代删除会抛异常:java. ...

  6. hadoop用mutipleInputs实现map读取不同格式的文件

    mapmap读取不同格式的文件这个问题一直就有,之前的读取方式是在map里获取文件的名称,依照名称不同分不同的方式读取,比如以下的方式 //取文件名 InputSplit inputSplit = c ...

  7. node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  8. mysql还原数据库时,提示ERROR 1046 (3D000) No database selected 的解决方法

    使用mysql数据库的朋友, 经常会使用mysqldump备案数据库, 然后到新服务器还原, 这个过程中, 有朋友会遇到ERROR 1046 (3D000)  No database selected ...

  9. Java SpringMVC 定时任务

    1.web.xml 2.spring-mvc.xml <?xml version="1.0" encoding="UTF-8"?> <bean ...

  10. SignalR简单Demo

    我们实现一个简单的消息通知的Demo 在NuGet中添加SignalR引用 install-package Microsoft.AspNet.SignalR 然后我们创建一个类来引用Hub类 name ...