搜索文字加红
Posted DreamSeeker
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了搜索文字加红相关的知识，希望对你有一定的参考价值。
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>
以上是关于搜索文字加红的主要内容，如果未能解决你的问题，请参考以下文章