妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
2024-04-23 10:00:18
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>转载于:https://www.cnblogs.com/nifengs/p/4962051.html
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示相关推荐
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 李炎恢教程/妙味课堂javaScript/jQuery/js/Ajax全套视频
使用JavaScript编写一个Base.js基础库,然后通过这个基础库+自行开发的插件,最终完成一个精简型博客主题的前端功能. 这是一个问答系统精简版,高仿了一些知乎网站的部分功能.通过这个小型项目 ...
- 2019最新妙味课堂Javascript实炼高级专题项目实战(完整)
课程目录 0-JavaScript视频教程--JS学前预热课程-1.avi 0-JavaScript视频教程--JS学前预热课程-2.avi 0-JavaScript视频教程--JS学前预热课程-3. ...
- 妙味课堂Javascript+Blue+Js重入门到精通
0-JavaScript视频教程--JS学前预热课程-1.avi 0-JavaScript视频教程--JS学前预热课程-2.avi 0-JavaScript视频教程--JS学前预热课程-3.avi 0 ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- Javascript简单选项卡_妙味课堂
上周末为止看完了html+css的视频教程,这周开始Javascript,看的妙味课堂的教程,多做练习,同时强化html和css. 思路: 选项卡,简单来说有两部分组成,上面的按钮和下面相应要显示的块 ...
- 妙味课堂ajax教程,妙味课堂JS高级专题篇视频资料分享
<妙味课堂JS高级专题篇视频教程>将向大家详细介绍javascript,javascript是一种直译式脚本语言,也是一种广泛用于客户端Web开发的脚本语言.目前,被数百万计的网页用来改进 ...
- 妙味课堂cctv移动端项目
2019独角兽企业重金招聘Python工程师标准>>> 项目介绍 妙味课堂仿cctv项目 移动端准备工作 viewport 这里根据psd,宽度为640,所以使用了下面的meta & ...
- 妙味课堂 - 前端初窥 -
Ps技术 - 切图 测量 测量:F8.信息面板 切图(抠图) command + c 复制 command + n 新建同等大小纸张 command + d 粘贴 command + s 保存 css ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
最新文章
- 记录一个无水印 免费的录屏软件 【需要登录哔哩哔哩账号】
- 远程服务器的url怎么配置文件,Linux常用命令(5)--SSH访问远程服务器、SCP服务器间文件拷贝...
- 谁能撼动美国男篮霸主地位？东京奥运看这四队
- C语言线性插值lerp算法(附完整源码)
- java获取ram_Java：ChronicleMap第2部分，超级RAM映射
- 电子计算机简称什么也称什么,点点点电子美容仪
- 可视化排班管理_企业人事资源管理系统
- [Ext JS 4]性能优化
- 突破验证，安装Media Player11.
- 集中式 vs 分布式 版本控制
- cognos报表制作学习（一）cognos如何新建普通的reportstudio报表
- 腾讯推出移动端动画组件PAG，释放设计生产力!
- 转调小程序（练口琴时用的）
- 数据可视化与大数据分析
- Probability Theory | Coin Tossing Problems (TBC) | 概率论中的抛硬币问题 （未完待续）
- html页面增加分页符
- 大数据是什么？1分钟了解大数据的概念
- 4月27日----5月1日二年级课程表
- 《51单片机》用STC-ISP-15XX-V6.85F烧录程序的步骤
- 南大通用GBase8s 常用SQL语句（261）