<!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] + "\n";
}
}
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]+"\n";
}
}
}
}
</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>
