<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单词提取工具</title> <link rel="shortcut icon" href="提取.ico" type="image/x-icon" /> <style type="text/css"> *{ margin: 0; padding: 0; } #before{ display: block; width: 448px; height: 100%; float: left; border: none; box-sizing: border-box; padding: 8px; } #after { width: 448px; height: 100%; float: right; overflow: auto; border: none; box-sizing: border-box; padding: 8px; } button { display: inline-block; width: 100px; height: 100%; background: pink; border: none; } #box { width: 1000px; height: 400px; margin: 0px auto; border: 1px solid red; } #tell { width: 1000px; height: 30px; font-size: 17px; display: block; margin: 0px auto; } #tell>.so{ max-width: 400px; height: 100%; float: right; } #tell>.so>span { cursor: pointer; } #endStr { display: inline-block; max-width: 50%; height: 100%; } </style> <script type="text/javascript"> window.onload=function (){ var NewArr=[]; var filterArr=[];/*二次过滤容器*/ var rightText=document.getElementById("after"); var but=document.getElementsByTagName("button")[0]; but.onclick=function (){ NewArr=[]; rightText.value=""; var before=document.getElementById("before").value; var arr=before.match(/[A-z]{3,}/ig); for (var i=0;i<arr.length;i++) { var isOk = true; for (var j = 0; j < NewArr.length; j++) { if ((NewArr[j].toLowerCase() == arr[i].toLowerCase() )) { isOk = false; } } if (isOk) { NewArr[NewArr.length] = arr[i]; rightText.value += NewArr[j] + " "; } } document.getElementById("endStr").innerHTML="共转换"+NewArr.length+"条数据！"; } document.querySelector(".so>span").onclick=function (){ var text=document.querySelector(".so>input").value; var filter=new RegExp(text); rightText.value=""; for (var j=0;j<NewArr.length;j++){ if (filter.test(NewArr[j]) && (! new RegExp("\[|\]").test(NewArr[j]))){ filterArr[filterArr.length]=NewArr[j];/*二次过滤的数据存入数组 */ rightText.value+= NewArr[j]+" "; } } } } </script> </head> <body> <h1 style="text-align: center;line-height: 80px">单词提取工具</h1> <div id="tell"> <div id="endStr"></div> <div class="so"> <span>[点我过滤]</span> <input type="text" placeholder="请输入二次过滤的正则..." /> </div> </div> <div id="box"> <textarea id="before"></textarea> <button>转换></button> <textarea id="after"></textarea> </div> </body> </html>