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(/(. ...
随机推荐
- openwrt ramips随记
ar71xx / brcm47xx / brcm63xx / ramips是指cpu的系列,ramips是指ralink系列的
- model中字段格式验证
注释部分在前端不显示 /// <summary> /// 链接地址 /// </summary> [Display(Name = "链接地址")] //[D ...
- vs2013执行Add-Migration出现的问题
1. 无法将"Add-Migration"项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次 网上解决方法为:h ...
- 在Windows上安装Python
首先,从官网下载 最新版本 的Python 2.7.可通过 Python官网 的”Windows Installer”链接保证下载到的版本是最新的. Windows版本是MSI文件格式,双击它即可开始 ...
- PHP：var_dump展示不全
问题:var_dump展示不全,出现省略号 我们使用php的var_dump函数,可以更直观的查看输出结果,包括类型,数量等详细信息.此函数显示关于一个或多个表达式的结构信息,包括表达式的类型与值.数 ...
- Heartbeat+DRBD+MySQL高可用方案【转】
转自Heartbeat+DRBD+MySQL高可用方案 - yayun - 博客园 http://www.cnblogs.com/gomysql/p/3674030.html 1.方案简介 本方案采用 ...
- asp中的动态数组
<% Dim array1(),i ReDim array1(3)array1(3)=10response.Write(array1(3)&"<br>") ...
- http & json
TCP(传输层协议) (1) 面向连接 (2) 可靠的 (3) 基于字节流的 连接建立阶段: 客户端 ------->SYN 服务端(服务器被动打开) 客 ...
- C# Socket的TCP通讯
Socket的TCP通讯 一. socket的通讯原理 服务器端的步骤如下. (1)建立服务器端的Socket,开始侦听整个网络中的连接请求. (2)当检测到来自客户端的连接请求时,向客户端发送收到连 ...
- How to Iterate Over a Map in Java?(如何遍历Map)
1.Iterate through the "entrySet" like so: public static void printMap(Map mp) { Iterator i ...