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(/(. ...
随机推荐
- Android onTouchEvent方法
onTouchEvent方法简介 前面已经介绍了手机键盘事件的处理方法,接下来将介绍手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法, ...
- 树形dp Codeforces Round #364 (Div. 1)B
http://codeforces.com/problemset/problem/700/B 题目大意:给你一棵树,给你k个树上的点对.找到k/2个点对,使它在树上的距离最远.问,最大距离是多少? 思 ...
- 使WiFi具有保存历史连接的功能
在wpa_supplicant.conf里面添加这个功能 update_config=1 就能更新了,保存了历史的连接AP,不用再输入密码
- 如何获取path与basePath
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding=& ...
- The magic behind configure, make, make install
原文:https://robots.thoughtbot.com/the-magic-behind-configure-make-make-install#where-do-these-scripts ...
- 转 Problem: AnyConnect was not able to establish a connection to the specified secu
不多说直接上问题,在点击连接时,也是能正常连接上输入密码,在输出用户名密码后 连接后,会出现: problem:anyconnect was net able to establish a conne ...
- ListView的淡入淡出和Activity的淡入淡出补间动画效果Animation
//=========主页面======================= package com.bw.lianxi7; import android.os.Bundle;import androi ...
- [转]理解SSL（https）中的对称加密与非对称加密
加密 解密 Tweet 密码学最早可以追溯到古希腊罗马时代,那时的加密方法很简单:替换字母. 早期的密码学 古希腊人用一种叫 Scytale 的工具加密.更快的工具是 transposition ...
- 新手引导-ugui
http://www.unitymanual.com/thread-38287-1-1.html 我已经在 干货区发布了,所以 这里就记录一下地址,懒得再贴了 新年第一贴,大家 看完代码 ,是不是发现 ...
- JS定时器的使用--无缝滚动
<title>无标题文档</title> <style> * {margin:0; padding:0;} #div1{width:1172px; height:2 ...