求HTML代码（搜索功能）

cszlxl · 发表于 2018-5-1 12:38:43

求一个HTML代码，也可以是JS代码（如果是JS代码就要求也把调用的代码写上，因为我不太明白代码，谢谢）
这是我的代码，只能搜索，然后搜索到的文字变成红色。这种不行，因为行数太多，所以想能跳转到搜索到的行的地方，链接：https://pan.baidu.com/s/1EMSNrFToIG2HsVw2BABCOA 密码：nqpk
我想要的要求：搜索想要的文字，之后网页自动跳转到文字的地方。再点搜索可以继续往下搜索。

今晚我是你的 · 发表于 2018-5-1 15:16:34

你这有毛病啊，都跳到下面了，搜索按钮已经跑上面去了还怎么点？除非是浮动的按钮

sora · 发表于 2018-5-1 15:15:22

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CTRL+F</title>
<style type="text/css">
#ff {
position: fixed;
top: 10px;
right: 10px;
}
.result {
/* 高亮, 不想要注释掉 */
background: yellow;
color: red;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="ff">
<input id="search" type="text" placeholder="请输入要搜索的内容"/>
搜索
</div>
<div id="content">
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
测试中文
www.baidu.com
<h2>页面高亮搜索</h2>
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
www.91ai.net
</div>
<script type="text/javascript">
var content = $('#content').html();
$('#search-btn').click(function(){
if(!$("#search-btn").attr("n")){
$("#search-btn").attr("n", 0);
}
$('#content').html(content);
var searchText = $('#search').val();
if(searchText.length == 0){
return false;
}
var regExp = new RegExp(searchText, 'g');
var newHtml = content.replace(regExp, '' + searchText + '');
$('#content').html(newHtml);
var resnum = $(".result").length - 1;
$("#search-btn").attr("all", resnum);
$(".result").each(function(k, v){
$(v).attr("id", "result" + k);
});
$("html, body").animate({scrollTop: $("#result" + $("#search-btn").attr("n")).offset().top}, 100);
if(parseInt($("#search-btn").attr("n")) >= parseInt($("#search-btn").attr("all"))){
$("#search-btn").attr("n", 0);
}else{
$("#search-btn").attr("n", parseInt($("#search-btn").attr("n")) + 1);
}
});
</script>
</body>
</html>

复制代码

https://segmentfault.com/a/1190000008830839

复制代码

初始代码复制这里的.
剩下的手打. 不知道逻辑有没有错, 没有太多测试.
应该能满足撸主的需求了吧?

sora · 发表于 2018-5-1 14:34:35

cszlxl 发表于 2018-5-1 14:30
还有这个代码吗？？能不能让试试。。。

这个百度一大堆. 随便搜索都能找到.
等我来给你做个.html

xuliliang · 发表于 2018-5-1 14:32:23

Wars 发表于 2018-5-1 12:52
不会跳转有大佬说说怎么实现跳转吗

跳转方式:
1. 设置 scroll
2. 设置 offset
3. uri/#id 跳转
网络随便搜一搜吧, 方法太多了.

cszlxl · 发表于 2018-5-1 14:30:27

sora 发表于 2018-5-1 14:23
想起10年前什么都不会, 想要搜索功能, 就是百度找的js实现ctrl+f

还有这个代码吗？？能不能让试试。。。

sora · 发表于 2018-5-1 14:23:27

想起10年前什么都不会, 想要搜索功能, 就是百度找的js实现ctrl+f

cszlxl · 发表于 2018-5-1 13:59:09

J3n5en 发表于 2018-5-1 13:14
链接: https://pan.baidu.com/s/1W7xdQ_Wgkws03T3UARm3xg 密码: yphb
试试这样？写得好恶心。。。。 ...

试了，可以使用，但是还需要帮忙改动一下，第一，主要是点第一下不能过去，还得点两下才能搜索。第二，不能继续搜索，如果有同样的，就只能搜索第一个，找到之后再点搜索，别的就不动了。。

J3n5en · 发表于 2018-5-1 13:14:08

链接: https://pan.baidu.com/s/1W7xdQ_Wgkws03T3UARm3xg 密码: yphb
试试这样？写得好恶心。。。。

cszlxl · 发表于 2018-5-1 12:57:41

hellfires 发表于 2018-5-1 12:55
这tm不是ctrl+f嘛。。。。我去

因为要在手机上看，所以没有ctrl+F，所以加一个按钮，可以搜索。

hellfires · 发表于 2018-5-1 12:55:18

提示: 作者被禁止或删除内容自动屏蔽

		自动登录	找回密码
密码			注册

hellfires hellfires 当前离线积分 20031	7^# 发表于 2018-5-1 12:55:18 \| 只看该作者提示: 作者被禁止或删除内容自动屏蔽
hellfires hellfires 当前离线积分 20031
	回复举报

求HTML代码（搜索功能）

点评