JS查找和替换字符串列子
依赖 工具函数库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#box{
position: relative;
width: 500px;
padding: 10px;
background: #eee;
}
#btnbox{
position: absolute;
right: -60px;
top: 0;
width: 50px;
line-height: 25px;
background: #666666;
color: #fff; }
#btnbox li,#btnbox span{
display: block;
height: 25px;
padding: 5px;
}
#btnbox li:hover,#btnbox span:hover{
background: #0000FF;
cursor: pointer;
}
#btnbox ul{
display: none;
}
#dialog{
position: absolute;
left: 50%;
top: 50%;
width: 460px;
height: 260px;
padding: 20px;
margin-left: -255px;
margin-top: -155px;
background: #CCEEDD;
border: 5px solid #0000FF;
}
#dialog button{
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
cursor: pointer;
}
#dialog .dialog-tt ul{
border-bottom: 2px solid #0000FF; }
#dialog .dialog-tt li{
float: left;
padding: 5px 10px;
cursor: pointer; }
#dialog .dialog-tt li.active{
background: #0000FF;
color: #fff;
}
#dialog .dialog-bd{
padding: 10px;
}
.f-cb{
zoom: 1;
}
.f-cb:after{
content: '';
display: block;
clear: both;
}
.f-dn{
display: none;
}
.f-db{
display: block;
}
</style>
<script src="hl_tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oBox = hGetId('box');
var oDialog = hGetId('dialog');
var oBtnbox = hGetId('btnbox');
var oBtnboxUl = hGetTagName('ul',btnbox)[0];
var aBtnboxLi = hGetTagName('li',oBtnboxUl);
var oClose = hGetTagName('button',oDialog)[0];
var oBtnSeah = hGetId('btn-seah');
var oIptSeah = hGetId('ipt-seah');
var oBtnReplace = hGetId('btn-replace');
var oIpt1Replace = hGetId('ipt1-replace');
var oIpt2Replace = hGetId('ipt2-replace');
var onOff = true;
var sCon = hGetId('con').innerHTML;
var aDialogTtLi = hGetTagName('li', hGetTagName('div',oDialog)[0]);
var aDialogBdDiv = hGetTagName('div',hGetId('dialog-bd'));; hGetTagName('span',btnbox)[0].onclick = function(){ if(onOff){
hShow(oBtnboxUl);
}else{
hHide(oBtnboxUl);
}
onOff = !onOff;
} function fnTab(_this,index){
for (var i = 0; i < aDialogTtLi.length; i++) {
aDialogTtLi[i].className = '';
hHide(aDialogBdDiv[i]);
}
hGetId('con').innerHTML = sCon;
_this.className = 'active';
hShow(aDialogBdDiv[index]);
} aBtnboxLi[0].onclick = function(){
hShow(oDialog);
fnTab(aDialogTtLi[0],0);
}
aBtnboxLi[1].onclick = function(){
hShow(oDialog);
fnTab(aDialogTtLi[1],1);
}
oClose.onclick = function(){
hHide(oDialog);
} for (var i = 0; i < aDialogTtLi.length; i++) { aDialogTtLi[i].index = i; aDialogTtLi[i].onclick = function(){
fnTab(this,this.index);
}
} oBtnSeah.onclick = function(){
if(oIptSeah.value == ''){
alert('请输入要查找的内容');
hGetId('con').innerHTML = sCon;
}else{
var ohReplace = hReplace(sCon , oIptSeah.value);
if(ohReplace.flag === false){
alert('找不到字符:=》'+ oIptSeah.value);
hGetId('con').innerHTML = sCon;
}else{
hGetId('con').innerHTML = ohReplace.newStr;
oIptSeah.value = '';
}
}
} oBtnReplace.onclick = function(){
var str = hGetId('con').innerHTML;
if(oIpt1Replace.value == ''){
alert('请输入要替换的内容');
}else{
var ohReplace = hReplace(str , oIpt1Replace.value , oIpt2Replace.value, 1);
if(ohReplace.flag === false){
alert('找不到字符:=》'+ oIpt1Replace.value);
hGetId('con').innerHTML = str;
oIpt1Replace.value = oIpt2Replace.value = '';
}else{
if(oIpt2Replace.value == ''){
if (confirm("确定删除" + oIpt1Replace.value) ==true){
hGetId('con').innerHTML = ohReplace.newStr;
oIpt1Replace.value = oIpt2Replace.value = '';
}else{
oIpt1Replace.value = oIpt2Replace.value = '';
return false;
}
}else{
hGetId('con').innerHTML = ohReplace.newStr;
oIpt1Replace.value = oIpt2Replace.value = '';
}
}
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="con">
妙味课堂是一支充满温馨并且极富人情味的IT培训团队；
2010～2011年，我们深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的 JavaScript 课程，
2011～2013年，我们精准研发出最新HTML5&CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中，
希望尽最大努力，将一种快乐愉悦的授课体验传递给我们的每一位学员。
在未来几年内，妙味课堂会逐渐发展成由上百位优秀讲师所带领的创业培训团队，
这些优秀讲师将是每个培训区域的独立负责人，他们是妙味课堂未来发展道路中最强大的力量。
</div>
<div id="btnbox">
<span>展开</span>
<ul >
<li>查找</li>
<li>替换</li>
</ul>
</div>
</div>
<div id="dialog" class="f-dn">
<button>X</button>
<div class="dialog-tt">
<ul class="f-cb">
<li class="active">查找</li>
<li>替换</li>
</ul>
</div>
<div id="dialog-bd" class="dialog-bd">
<div>
<input type="text" name="" id="ipt-seah" value="" />
<input type="button" name="" id="btn-seah" value="查找" />
</div>
<div class="f-dn">
<input type="text" name="" id="ipt1-replace" value="" />
<input type="text" name="" id="ipt2-replace" value="" />
<input type="button" name="" id="btn-replace" value="替换" />
</div>
</div>
</div>
</body>
</html>
JS查找和替换字符串列子的更多相关文章
- JS 利用正则表达式替换字符串
JS 利用正则表达式替换字符串 博客分类: JavaScript 学习资料 Java代码 收藏代码 JS 利用正则表达式替换字符串 var data = "123123,213,12312, ...
- 在LoadRunner中查找和替换字符串
参考<Search & Replace function for LoadRunner>: http://ptfrontline.wordpress.com/2009/03/13/ ...
- Word 查找和替换字符串方法
因为项目需要通过word模板替换字符串 ,来让用户下载word, 就在网上找了找word查找替换字符串的库或方法,基本上不是收费,就是无实现,或者方法局限性太大 .docx 是通过xml来存储文字和其 ...
- Shell：sed用法 - 查找并替换字符串
原文链接 语法 sed 's/serach_str/replace_str/g' file_path 在某个文件中查找所有的serach_str并替换为replace_str 参数 描述 serach ...
- 查找并替换字符串 Find And Replace in String
2018-07-29 17:08:15 问题描述: 问题求解: 字符串替换的问题有个技巧就是从右向左进行替换,这样的话,左边的index就不需要考虑变动了. public String findRep ...
- JS使用replace替换字符串中的某段或某个字符
函数的介绍参考:http://www.w3school.com.cn/jsref/jsref_replace.asp 下列代码将Hello World!中的World替换为Jim <html&g ...
- js截取+全部替换+字符串
//将关键字标志显示到页面中 function showKeyWord(showStr) { var keyword = $("#keyword").val();//页面中的关键字 ...
- js写的替换字符串（相当于js操作字符串的一个练习）
1.达到的效果 1./main_1.do,/left_1.do -> main:1,left:1 2./tbl_type/v_list_{id}.do -> tbl_type:list:{ ...
- js replace 如何替换字符串中的最后一个匹配项
1.正则表达时,贪婪模式,.*会一直匹配到最后一个 // 验证 let str = "123[空]345[空]789[空]0"; let res = str.replace(/(. ...
随机推荐
- Centos7下安装numpy+matplotlib+scipy
摘自:http://litchiware.github.io/centos/2015/07/05/centos7%E4%B8%8B%E5%AE%89%E8%A3%85numpy+matplotlib+ ...
- Fragment和Activity之间通过广播的方式传递数据
四大组件之间传递数据可以用广播,但是有次面试官说太重了,用eventbus代替.下面的广播传递数据方法仅当学习参考. 1.管理类 /** * 广播管理类:注册广播.注销广播.发送广播 * @autho ...
- iOS传值之通知传值（三）
输入所要发送的信息 ,同时将label的值通过button方法调用传递, - (IBAction)buttonClick:(id)sender { //添加 字典,将label的值通过key值设置传递 ...
- mongodb replica set介绍
近年来,随着大数据越来越火,非关系型数据库的重要性被越来越多的人所认知,越来越多的开发者逐渐加入到NoSQL的阵营中.我们知道NoSQL是Not Only SQL的意思,既然如此,很多关系型数据库所支 ...
- mysql innobackupex备份工具
先简单介绍一下这个工具:innobackupexinnobackupex比xtarbackup有更强的功能,它整合了xtrabackup和其他的一些功能,他不但可以全量备份/恢复,还可以基于时间的增量 ...
- Response.Flush()
Response.Buffer=True就是在缓存网页 访问网站一般是程序直接输出网页结果,或从缓存中读取网页结果2种方式.两种方式在速度上是有差异的 设置 Response.Buffer = Tru ...
- php的错误和异常处理
php中try catch的例子: <?php try { if (@mysql_connect('localhost','root','123456')){ // echo 'success! ...
- oracle中触发器的讲解
触发器在数据库里以独立的对象存储,它与存储过程和函数不同的是,存储过程与函数需要用户显示调用才执行,而触发器是由一个事件来启动运行.即触发器是当某个事件发生时自动地隐式运行.并且,触发器不能接收参数. ...
- Vs2010 WPF 项目打包
[转]图解WPF程序打包全过程 首先打开已经完成的工程,如图: 下面开始制作安装程序包. 第一步:[文件]——[新建]——[项目]——安装项目. 名称——可以自己根据要求修改. 位置——是指你要制作的 ...
- Android 使用存放在存assets文件夹下的SQLite数据库
因为这次的项目需要自带数据,所以就就把数据都放到一个SQLite的数据库文件中了,之后把该文件放到了assets文件夹下面.一开始打算每次都从assets文件夹下面把该文件夹拷贝到手机的SD卡或者手机 ...