网页模糊查询段落
可以用于小说查询大段落的网页
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<h1>模糊查询段落</h1>
<style>
.blue {
color: blueviolet;
}
.font {
background-color: white;
}
.note {
font-size: 16px;
font-weight: 700;
color: #f60;
text-indent: -2em;
}
* {
text-align: center;
}
a {
text-decoration: none;
}
</style>
</head>
<body class="font" >
<div class="note">
请先选择文件
</div>
<div class="blue">
<a ><input type="file" id="selectFiles" onchange="dealSelectFiles()" value="选择文件" ></a>
<a ><input type="button" id="sosuo" value="搜索"/> </a>
<a ><input type="text" id="text"></a>
</div>
<ul>
<textarea id="txt" rows="25" cols="65" style="background:white" > </textarea>
<textarea id="txt1" rows="25" cols="65" style="background:white" > </textarea>
</ul>
<script type="text/javascript">
function dealSelectFiles() {
var file = document.getElementById("selectFiles").files[0];
var name = file.name;
var path = document.getElementById("selectFiles").value;
console.log("文件名:"+name+"大小:"+path);
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
document.getElementById("txt").value =this.result;
}
}
var oBtn = document.getElementById('sosuo');
oBtn.onclick = function(){
document.getElementById("txt1").value =null;
var so = new RegExp(document.getElementById("text").value);
var txt = document.getElementById("txt").value;
var arry = txt.split("\n");
for(var i=0;i<arry.length;i++){
if (so.test(arry[i])) {
document.getElementById("txt1").value = document.getElementById("txt1").value +'\n' +arry[i];
}
}
};
</script>
</body>
</html>