我正在用html5开发一个项目。我在div中搜索一个单词。我需要从内容中突出显示该单词,并且需要在搜索到的单词之前和之后对内容进行切片。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#search').click(function() {
var keyword = $('.qid').val().replace(/\s+/g, " ").replace(/\s+$|^\s+/g, "");
var containsString = keyword;
if(keyword == ""){
}else{
$('#search_content').css('overflow-y','scroll');
}
$("p").removeClass('show');
containsString = "p:contains("+containsString+")".replace("p:contains()","");
$(containsString).addClass('show');
$('#search_content').show();
});
$('.srch').click(function(){
$('#displaybox2').show();
});
});
</script>
<style>
.srch {
background: none repeat scroll 0 0 #FFFFFF;
color: #FFFFFF;
cursor: pointer;
float: right;
height: 30px;
margin-right: 27%;
margin-top: 5px;
padding: 2px 0 2px 3px;
width: 30px;
}
#displaybox2 {
border: 1px solid #FFFFFF;
float: left;
height: 552px;
left: 1px;
position: relative;
width: 370px;
z-index: 100000;
}
#search_content {
float: left;
width: 100%;
position: relative;
height: 510px;
display: none;
}
p,h2{
display:none;
}
.qid{
margin-top:10px;
}
.show{
display: block;
background-color:#FFFFFF;
cursor:pointer;
}
.highlight{
background-color:#636F7C;
}
.srch_icon {
width: 100%;
}
</style>
</head>
<body>
<div id="displaybox2">
<input class="qid" type="text"/><button id = "search">Search</button>
<div id = "search_content">
<p>Next evening was a lovely evening, and I walked out early to enjoy it. The sun was not yet quite down when I traversed the field-path near the top of the deep cutting. I would extend my walk for an hour, I said to myself, half an hour on and half an hour back, and it would then be time to go to my signal-man’s box.</p>
<p>Before pursuing my stroll, I stepped to the brink, and mechanically looked down, from the point from which I had first seen him. I cannot describe the thrill that seized upon me, when, close at the mouth of the tunnel, I saw the appearance of a man, with his left sleeve across his eyes, passionately waving his right arm.</p>
</div>
</div>
</body>
</html>
如果我搜索单词'extend',则返回答案为
第二天晚上是一个美好的夜晚,我早早走出去享受它。当我穿过深切割顶部附近的田间路径时,太阳还没有完全下降。我会延长一小时的步行时间,我对自己说,半小时后半小时回来,然后就可以到我的信号箱了。
但我需要下面的答案
....靠近深切割的顶部。我会延长我的步行一小时,我对自己说,半小时......
编辑:
我需要关键字之前和之前的10个字。如果关键字是 不止一次存在,它也会在之前和之后显示10个单词 关键字。你明白了吗帮助我
提前致谢...
答案 0 :(得分:3)
可能是这样的:
$('#search').click(function() {
var keyword = $('.qid').val().replace(/\s+/g, " ").replace(/\s+$|^\s+/g, ""),
containsString = keyword;
if (keyword == "") {
}
else {
$('#search_content').css('overflow-y','scroll');
}
if ($("p:contains('" + keyword + "')").length) {
var p = $("p:contains('" + keyword + "')"),
html = p.html(),
regex = new RegExp("" + keyword, "gi"),
highlighted = html.replace(regex, "<strong>" + keyword + "</strong>");
p.html(highlighted);
}
$("p").removeClass('show');
$('#search_content').show();
});