搜索文字加紅
阿新 • • 發佈：2017-09-11
utf-8 查找 ready none float gre har 所有 borde DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
margin: 0;
user-select: none;
}
.logo{
width: 100%;
height: 80px;
background-color: #2f3942;
}
.logo>img{
margin-top: 20px;
margin-left: 20px;
}
.content{
width: 680px;
height: auto;
margin-left: 15%;
}
.content>p{
width: 100%;
font-size: 14px;
color: grey;
height: 30px;
line-height: 30px;
margin-top: 50px;
}
.results{
width: 100%;
height: 110px;
margin-top: 10px;
}
.results>a{
display: inline-block;
width: auto;
height: 25px;
font-size: 18px;
color: #00c;
}
.recont{
width: 100%;
height: 80px;
margin-top: 10px;
}
.recontimg{
width: 100px;
height: 70px;
float: left;
overflow: hidden;
}
.recontimg:hover{
cursor: pointer;
}
.recontimg>img{
width: 100%;
height: auto;
}
.recontzi{
width: 500px;
height: 80px;
float: left;
margin-left: 10px;
}
.recontzi>p:nth-of-type(1){
width: 500px;
height: 58px;
margin: 0;
font-size: 14px;
margin-top: -3px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
.recontzi>p:nth-of-type(2){
width: 350px;
height: 20px;
margin: 0;
float: left;
color: #55a048;
margin-top: -1px;
overflow: hidden;
text-overflow: ellipsis;
}
.recontzi span{
float: left;
color: #55a048;
margin-top: -1px;
margin-left: 50px;
}
.searchsome{
width: 680px;
height: 50px;
margin-top: 50px;
margin-left: 15%;
}
.searchsome>input:nth-of-type(1){
width: 470px;
height: 30px;
float: left;
}
.searchsome>div{
width: 100px;
height: 36px;
color: white;
text-align: center;
line-height: 36px;
float: left;
margin-left: 30px;
user-select: none;
border-radius: 2px;
background-color: #3483f8;
}
.searchsome>div:hover{
cursor: pointer;
}
.highlight {
color:red;
}
</style>
<body>
<div class="logo">
<img src="../imgHY/header-logo.png" />
</div>
<div class="content">
<p>為你找到 <span>250</span> 個相關結果</p>
<div class="results">
<a href="#">我是一個非常非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying1.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或這是一個忍者的世界，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/nodilidili.com/anime/nodilidili.cocom/anime/nodilidili.cocom/anime/nodilidili.cocom/anime/nodilidili.com/anime/nodilidili.com/anime/notanonin </p> <span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying2.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying3.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying4.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying5.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
</div>
<div class="searchsome">
<input type="text" id="heheda" placeholder="輸入你想搜索的巴拉"/>
<div class="searchnow">立即搜索</div>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$(‘.searchnow‘).click(highlight);//點擊search時，執行highlight函數；
function highlight()
{
clearSelection();//先清空一下上次高亮顯示的內容；
var searchText = $(‘#heheda‘).val();//獲取你輸入的關鍵字；
var regExp = new RegExp(searchText, ‘g‘);//創建正則表達式，g表示全局的，如果不用g，則查找到第一個就不會繼續向下查找了；
$(‘p‘).each(function()//遍歷文章；
{
var html = $(this).html();
var newHtml = html.replace(regExp, ‘<a class="highlight" >‘+searchText+‘</a>‘);//將找到的關鍵字替換，加上highlight屬性；
$(this).html(newHtml);//更新文章；
});
}
function clearSelection()
{
$(‘p‘).each(function()//遍歷
{
$(this).find(‘.highlight‘).each(function()//找到所有highlight屬性的元素；
{
$(this).replaceWith($(this).html());//將他們的屬性去掉；
});
});
}
});
</script>
</html>
來自為知筆記(Wiz)
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{
margin: 0;
user-select: none;
}
.logo{
width: 100%;
height: 80px;
background-color: #2f3942;
}
.logo>img{
margin-top: 20px;
margin-left: 20px;
}
.content{
width: 680px;
height: auto;
margin-left: 15%;
}
.content>p{
width: 100%;
font-size: 14px;
color: grey;
height: 30px;
line-height: 30px;
margin-top: 50px;
}
.results{
width: 100%;
height: 110px;
margin-top: 10px;
}
.results>a{
display: inline-block;
width: auto;
height: 25px;
font-size: 18px;
color: #00c;
}
.recont{
width: 100%;
height: 80px;
margin-top: 10px;
}
.recontimg{
width: 100px;
height: 70px;
float: left;
overflow: hidden;
}
.recontimg:hover{
cursor: pointer;
}
.recontimg>img{
width: 100%;
height: auto;
}
.recontzi{
width: 500px;
height: 80px;
float: left;
margin-left: 10px;
}
.recontzi>p:nth-of-type(1){
width: 500px;
height: 58px;
margin: 0;
font-size: 14px;
margin-top: -3px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
.recontzi>p:nth-of-type(2){
width: 350px;
height: 20px;
margin: 0;
float: left;
color: #55a048;
margin-top: -1px;
overflow: hidden;
text-overflow: ellipsis;
}
.recontzi span{
float: left;
color: #55a048;
margin-top: -1px;
margin-left: 50px;
}
.searchsome{
width: 680px;
height: 50px;
margin-top: 50px;
margin-left: 15%;
}
.searchsome>input:nth-of-type(1){
width: 470px;
height: 30px;
float: left;
}
.searchsome>div{
width: 100px;
height: 36px;
color: white;
text-align: center;
line-height: 36px;
float: left;
margin-left: 30px;
user-select: none;
border-radius: 2px;
background-color: #3483f8;
}
.searchsome>div:hover{
cursor: pointer;
}
.highlight {
color:red;
}
</style>
<body>
<div class="logo">
<img src="../imgHY/header-logo.png" />
</div>
<div class="content">
<p>為你找到 <span>250</span> 個相關結果</p>
<div class="results">
<a href="#">我是一個非常非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying1.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或這是一個忍者的世界，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/nodilidili.com/anime/nodilidili.cocom/anime/nodilidili.cocom/anime/nodilidili.cocom/anime/nodilidili.com/anime/nodilidili.com/anime/notanonin </p> <span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying2.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying3.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying4.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
<div class="results">
<a href="#">我是一個非常非常非常長的標題哦</a>
<div class="recont">
<div class="recontimg">
<img src="../imgHY/huoying5.jpg" />
</div>
<div class="recontzi">
<p>這是一個忍者的世界啊，我記得阿杜特別喜歡看火影忍者，當時我並不喜歡看動漫，當然現在也不喜歡看，啊哈哈哈或。能熱衷地喜歡一個劇也是不錯的，不像本寶寶，還珠格格和西遊記陪伴了我整個青春期，多麽痛的領悟啊</p>
<p>www.dilidili.com/anime/notanonin </p><span>2017-05-20</span>
</div>
</div>
</div>
</div>
<div class="searchsome">
<input type="text" id="heheda" placeholder="輸入你想搜索的巴拉"/>
<div class="searchnow">立即搜索</div>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$(‘.searchnow‘).click(highlight);//點擊search時，執行highlight函數；
function highlight()
{
clearSelection();//先清空一下上次高亮顯示的內容；
var searchText = $(‘#heheda‘).val();//獲取你輸入的關鍵字；
var regExp = new RegExp(searchText, ‘g‘);//創建正則表達式，g表示全局的，如果不用g，則查找到第一個就不會繼續向下查找了；
$(‘p‘).each(function()//遍歷文章；
{
var html = $(this).html();
var newHtml = html.replace(regExp, ‘<a class="highlight" >‘+searchText+‘</a>‘);//將找到的關鍵字替換，加上highlight屬性；
$(this).html(newHtml);//更新文章；
});
}
function clearSelection()
{
$(‘p‘).each(function()//遍歷
{
$(this).find(‘.highlight‘).each(function()//找到所有highlight屬性的元素；
{
$(this).replaceWith($(this).html());//將他們的屬性去掉；
});
});
}
});
</script>
</html>
來自為知筆記(Wiz)
搜索文字加紅