妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
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课：字符串、查找高亮显示的更多相关文章
- 妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示 使内嵌支持宽高 换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
- 妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
随机推荐
- docker学习（一）
docker的安装 (一)环境要求: 容器需要管理工具.runtime 和操作系统,选择如下: 1.管理工具 - Docker Engine 2.runtime - runc 3.操作系统 (二)安装 ...
- mysql分区分表
为毛要分表和分区,,,,所有数据库的通病,文件越大,性能越低...那问题就来了.数据越多文件越大...无解?哎,所以说知道 为毛要分区了吧!那分表又是毛线?分表就是把一张表拆分成若干表,,,根据情况常 ...
- 用 Label 控制 Service 的位置 - 每天5分钟玩转 Docker 容器技术（106）
上一节我们讨论了 Service 部署的两种模式:global mode 和 replicated mode.无论采用 global mode 还是 replicated mode,副本运行在哪些节点 ...
- 利用模板template动态渲染jsp页面
一.场景 在js中写html简直是噩梦,刚进新公司,在codereview的时候得知可以通过将html模板写在jsp页面,然后由js调取模板,利用replace()方法替换传值的方式避免在js中拼接h ...
- 【luogu P1396】营救
https://www.luogu.org/problem/show?pid=1396 弱化版的货车运输,用并查集维护连通块,将边按权值升序排序后依次插入直到两点连通,最后插入的边的权值就是最小的拥挤 ...
- svn服务器的搭建与使用二
转载出处 上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首 ...
- Eclipse Maven Mybatis的使用
关于maven的使用网上有太多教程,这里就不再介绍.本篇文章只用来记录 在Eclipse中使用maven创建含有mybatis的程序的配置,及注意事项. 使用Eclipse创建Maven项目 创建后的 ...
- linux0.11学习笔记（1）
公布软件包包括内容: bootimage.Z - 具有美国键盘代码的压缩启动映像文件: rootimage.Z - 以1200kB 压缩的根文件系统映像文件: linux-0.11.tar.Z- 内核 ...
- 给eclipse配置sublime主题的背景
效果例如以下: 步骤: 1.假设你的Eclipse没有Marketplace的话,你自己装一个即可了:Help–>Install New Software–>add location:ht ...
- html5 canvas 画板
<!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...