依赖 工具函数库
<!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(/(. ...
随机推荐
-
jquery判断id是否存在
1.判断标签是否存在 ){ 存在 } 2.判断(id="id名"的标签)是否存在,下面的不可以!!!因为 $("#id") 不管对象是否存在都会返回 objec ...
-
myeclipse2015 安装配置
本人提供<myeclipse2015 安装过程及破解资源> 链接:http://pan.baidu.com/s/1o79wwMQ 密码:crnp 安装步骤 1.安装jdk: http:// ...
-
Linux中安装opencv-3.3.1
在ubuntu16.04中安装opencv3.3.1的过程中踩了许多坑.一开始直接安装还挺顺利但运行程序时总是提示libgtk2.0-dev和pkg-config没有安装,在安装这两个包的过程中也不顺 ...
-
初始C语言中的数组(男神翁凯老师MOOC)
定义数组 ●<类型>变量名称[元素数量]; ● int grades[100]; ●double weight[20]; ●元素数量必须是整数 ●C99之前:元素数量必须是编译时刻确定的字 ...
-
js作为参数,并且返回值;js的回调模式 callback
有这样一个情景,当我们弹出一个 prompt的时候,要求用户在文本框输入一个文字,然后点击确认,就可以拿到返回值 var temp=prompt("请输入您的名字"); a ...
-
牛客练习赛1 A - 矩阵
链接:https://www.nowcoder.com/acm/contest/2/A来源:牛客网 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至 ...
-
帝国cms全文搜索 增加自定义字段搜索
帝国cms全站搜索功能只能调出固定的几个字段,如果想搜索其他字段的值,这时我们应该怎么办呢?开拓族网站有这个需求,所以研究了一下帝国的全站搜索,后来发现在/e/sch/index.php中可以直接对数 ...
-
Unity编辑器 - DragAndDrop拖拽控件
Unity编辑器 - DragAndDrop拖拽控件 Unity编辑器的拖拽(DragAndDrop)在网上能找到的资料少,自己稍微研究了一下,写了个相对完整的案例,效果如下 代码: object d ...
-
redis 网络架构
https://blog.csdn.net/simplemurrina/article/details/53890542 GDB redis https://gitbook.cn/gitchat/c ...
-
Linux基础命令-文件与目录
Linux基础命令-文件与目录 参考:<鸟哥linux私房菜>五-七章,17/12/5复习,18/01/15复习 文件权限 rwx421:用户,用户组,其他 umask查看默认权限:000 ...