温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

前端过滤关键字

发布时间:2020-07-18 23:48:56 来源:网络 阅读:785 作者:365850153 栏目:建站服务器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>关键字快速搜索</title>

<style>

body

{

font-size: 14px;

}



h3

{

display: inline;

margin: 0;

}



#spnKeyNum, #spnWordNum

{

color: #F00;

}



#spnList a

{

font-size: 12px;

color: #0000FF;

}



#spnTime

{

color: #600;

}



textarea, #divDisplay

{

margin: 0;

padding: 0;

font-size: 14px;

display: block;

background: #EEE;

border: #999 solid 1px;

}



#txtKeys

{

width: 95%;

height: 100px;

}



#txtContent, #divDisplay

{

height: 400px;

width: 95%;

}



#divDisplay

{

display: none;

overflow: auto;

}



#divDisplay em

{

color: #F00;

font-style: normal;

}



#divFoot

{

padding: 5px;

width: 95%;

}



#spnLable2

{

margin: 5px;

float: left;

color: #690;

}



button

{

float: left;

}



#desc

{

color: #333;

float: right;

}

</style>

</head>



<body onload="handleLoad();">

<div id="divTop">

<h3>关键字</h3>

<span id="spnLable1">(<span id="spnKeyNum">0</span>个)</span>

<span id="spnList">

<a href="javascript:load('city.txt');">世界城市</a>

<a href="javascript:load('words.txt');">部分英文单词</a>

<a href="javascript:load('idiom.txt');">成语全集</a>

</span>

</div>

<div id="divMain">

<textarea id="txtKeys" onchange="handleKeyChange();"></textarea>

<h3>内容</h3>

<span id="spnLable1">(<span id="spnWordNum">0</span>字)</span>

<textarea id="txtContent" onchange="handleContentChange();"></textarea>

<div id="divDisplay"></div>

</div>

<div id="divFoot">

<span id="spnLable2">搜索用时: <span id="spnTime">0</span>ms</span>

<button id="btnStart" onclick="handleClick();"> 测试</button>

<button id="btnReset" onclick="reset()" disabled="disabled"> 重置</button>

<span id="desc">EtherDream 2009</span>

</div>



<script>

var tblRoot;



/*

* 函数: makeTree

* 注释: 将关键字生成一颗树

*/

function makeTree()

{

var strKeys = objKeys.value;

var arrKeys = strKeys.split("");

var tblCur = tblRoot = {};

var key;



for(var i=0,n=arrKeys.length; i<n; i++)

{

key = arrKeys[i];



if(key == ';') //完成当前关键字

{

tblCur.end = true;

tblCur = tblRoot;

continue;

}



if(key in tblCur) //生成子节点

tblCur = tblCur[key];

else

tblCur = tblCur[key] = {};

}



tblCur.end = true; //最后一个关键字没有分割符

}



/*

* 函数: search

* 注释: 标记出内容中关键字的位置

*/

function search(content)

{

var tblCur;

var i = 0;

var n = content.length;

var p, v;

var arrMatch = [];



while(i < n)

{

tblCur = tblRoot;

p = i;

v = 0;



for(;;)

{

if(!(tblCur = tblCur[content.charAt(p++)]))

{

i++;

break;

}



if(tblCur.end) //找到匹配关键字

v = p;

}



if(v) //最大匹配

{

arrMatch.push(i-1, v);

i = v;

}

}



return arrMatch;

}

</script>



<script>

var $ = function(id){return document.getElementById(id)};



var objKeys = $("txtKeys");

var objContent = $("txtContent");

var objDisplay = $("divDisplay");

var bKeyChanged = false;





function handleKeyChange()

{

var str = objKeys.value;

var n;



if(str.length==0)

n = 0;

else

n = str.split(";").length;



/*

* 显示关键字数量

*/

$("spnKeyNum").innerHTML = n;



bKeyChanged = true;

}



function handleContentChange()

{

/*

* 显示内容长度

*/

$("spnWordNum").innerHTML = objContent.value.length;

}



function handleLoad()

{

handleKeyChange();

handleContentChange();

}



function handleClick()

{

var strContent = objContent.value;

var arrMatch;

var arrHTML = [];

var strHTML;

var mid;

var p = 0;





$("btnStart").disabled = true;

$("btnReset").disabled = false;



if(bKeyChanged)

{

makeTree();

bKeyChanged = false;

}



/*

* 开始搜索!

*/

var t = +new Date();



arrMatch = search(strContent);



/*

* 搜索用时

*/

$("spnTime").innerHTML = +new Date() - t;



/*

* 标记关键字

*/

for(var i=0,n=arrMatch.length; i<n; i+=2)

{

mid = arrMatch[i];

arrHTML.push(strContent.substring(p, mid),

"<em>",

strContent.substring(mid, p = arrMatch[i+1]),

"</em>");

}

arrHTML.push(strContent.substring(p));



strHTML = arrHTML.join("").replace(/\n/g, "<br>");



/*

* 显示结果

*/

objDisplay.innerHTML = strHTML;



objContent.style.display = "none";

objDisplay.style.display = "block";

}



function reset()

{

$("btnStart").disabled = false;

$("btnReset").disabled = true;



objContent.style.display = "block";

objDisplay.style.display = "none";

}



function load(file)

{

/*

* 创建HTTP组件

*/

if(window.ActiveXObject)

{

objHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else

{

objHttp = new XMLHttpRequest();

objHttp.overrideMimeType("text/xml");

}



objHttp.onreadystatechange = function()

{

if(objHttp.readyState != 4)

return;



objKeys.value = objHttp.responseText;

handleKeyChange();

};



/*

* 发送请求

*/

objHttp.open("GET", file, true);

objHttp.send(null);

}



</script>

</body>

</html>



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI