使用jq 简单实现 文字内容，批量多重替换功能
程序员文章站
2022-05-26 09:27:01
...
主要是因为 我本人工作中需要 将 一些文字内容 批量或者多重替换 ，然后 提交到 SVN上面。
也就是 所谓的 代码 改动登记了。 因为代码登记有它的 格式， 所以需要 多重批量 替换文字的功能。
一般的电脑的 或者其他的编辑器，都是 单个批量替换内容的， 我要多重替换就得 多重操作替换多次。。。
这样效率太低了。。。
当然 网上也有一些小工具比如 TextReplace_v1.8
这些 百度肯定可以出来。
可是呢 我用了一些感觉挺麻烦的，而且还得 一直打开它，否则每次打开就得加入我需要批量多重替换的 字典文件。。。感觉不够轻，太重了。一些功能我并不需要。
再说了 谁知道有没有病毒？ 怎么放心？
网上也找过了，，，居然没有 类似这样的 网站上面没有找到 这样的功能。
估计 不好实现。而且也不好 保存用户的 替换 字典内容吧。
实现的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>格式化SVN提交登记内容</title>
<!-- <script src="jquery-1.8.3.min.js" type="text/javascript"></script>-->
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
#find_r li input{
width: 350px;
border:1px solid #ccc;
border-radius: 4px; //圆角效果
height: 24px;
line-height:24px; /垂直居中
}
</style>
</head>
<body>
<div id="" style="width: 1200px;margin: 0 auto;">
<div id="">
<ol id="find_r">
<li>
<span>查找的内容： </span> <input type="text" id="find1" value=".java" />
<span> 替换的内容： </span> <input type="text" id="r1" value=".class" />
</li>
<li>
<span>查找的内容： </span> <input type="text" id="find2" value="D:\SVN\rpd-mall\branches\1.3.3\rpd-mall\src\" />
<span> 替换的内容： </span> <input type="text" id="r2" value="\WEB-INF\classes\" />
</li>
<li>
<span>查找的内容： </span> <input type="text" id="find3" value="/" />
<span> 替换的内容： </span> <input type="text" id="r3" value="\" />
</li>
<li>
<span>查找的内容： </span> <input type="text" id="find4" value="D:\SVN\rpd-mall\branches\1.3.3\rpd-mall\WebRoot" />
<span> 替换的内容： </span> <input type="text" id="r4" value="" />
</li>
<li>
<span>查找的内容： </span> <input type="text" id="find5" value="" />
<span> 替换的内容： </span> <input type="text" id="r5" value="" />
</li>
<li>
<span>查找的内容： </span> <input type="text" value="" />
<span> 替换的内容： </span> <input type="text" value="" />
</li>
<li>
<span>查找的内容： </span> <input type="text" value="" />
<span> 替换的内容： </span> <input type="text" value="" />
</li>
<li>
<span>查找的内容： </span> <input type="text" value="" />
<span> 替换的内容： </span> <input type="text" value="" />
</li>
</ol>
<div id="">
<input type="button" id="add" value="新增自定义查找替换" />
</div>
</div>
<div id="" style=" margin-top: 30px;">
<div id="">
需要格式化的内容：
</div>
<textarea id="formate_before" name="" rows="20" style="width: 1000px;"></textarea>
</div>
<div id="">
<input type="button" id="exec" value="执行格式化" />
</div>
<div id="" style=" margin-top: 30px;">
<div id="">
格式化的内容：
</div>
<textarea id="formate_after" name="" rows="20" style="width: 1000px;"></textarea>
</div>
</div>
</body>
<script>
jQuery(document).ready(function(){
$("#exec").click(function(){
var formate_before=$("#formate_before").val();
//var n=(formate_before.split('\n')).length-1;
//console.log("换行符出现的次数>>>"+n);
var nCount=(formate_before.split('\n')).length;
$("#find_r li").each(function(){
var findInput = $(this).find("input").eq(0);
var rInput = $(this).find("input").eq(1);
if(findInput.val()==""){
return true;
}
// 达到全局替换的目的, 或者通过 比较替换前的内容和替换后的内容是否相同，相同就表示 全局替换完成，否则就要继续
for (var i = 0; i <= nCount; i++) {
formate_before = formate_before.replace(findInput.val(),rInput.val());
}
});
$("#formate_after").val(formate_before);
});
});
</script>
</html>
总结
其实这个只是很简单，满足我的需求而已，如果需要更强大的，可以加上 正则匹配替换。
等， 用户的 替换字典可以想办法保存下来，可以保存在 cookie 里面或者想其他办法。
其实我随便写这个小功能， 也花了一点时间。
我们 码农学了 技术，就要想办法 使用它， 首先要 能够满足自己，帮助自己提高 工作的效率。
而不是 只以为学了 技术就是 为了 工作， 复制粘贴， 增删查改。
转载于:https://my.oschina.net/ouminzy/blog/1833895