JavaScript仿记事本的替换功能

来源:互联网 发布:android 聚合数据 编辑:程序博客网 时间:2024/05/21 09:12

最终效果

 

实现代码

<!DOCTYPE html><html><head><title></title><style type="text/css">* {font-family: "黑体";}h1 {font-size: 24px;text-align: center;}#center {width: 420px;margin: 0 auto;}.right {text-align: right;}textarea {width: 320px;height: 100px;outline: none;}input {width: 320px;outline: none;}#calc {display: block;width: 100px;height: 30px;margin: 10px auto;background-color: #5F6;border: none;}</style><script type="text/javascript">function calc() {var source = new String();var select = new String();var replace = new String();source = document.getElementById("source").value;select = document.getElementById("select").value;replace = document.getElementById("replace").value;var regS = new RegExp(select, "g");document.getElementById("result").value = source.replace(regS, replace);}</script></head><body><div id="center"><table><tr><td colspan="2"><h1>文本替换</h1></td></tr><tr><td class="right">文本:</td><td><textarea id="source"></textarea></td></tr><tr><td class="right">查找内容:</td><td><input type="text" id="select"></td></tr><tr><td class="right">替换为:</td><td><input type="text" id="replace"></td></tr><tr><td class="right">替换结果:</td><td><textarea id="result"></textarea></td></tr><tr><td colspan="2"><input type="button" id="calc" value="全部替换" onclick="calc()"></td></tr></table></div></body></html>