纯JS搜索页面内容-我的扩展版本

我扩展了什么?

1.不区分大小写,且替换后保留原大小写内容.

2.自动滚动到所属位置.

时间比较赶 也比较粗糙.

原作 张鑫旭

-------

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

$.tmp_textSearch_str = "";

$.fn.textSearch = function(str, options) { //纯JS字符串搜索

    var
defaults = {

        divFlag: true,

        divStr: " ",

        markClass: "",

        markColor: "red",

        nullReport: true,

        scroll: 1,

        callback: function() {

            return
false;

        }

    };

    var
sets = $.extend({}, defaults, options || {}), clStr;

    if
(sets.markClass) {

        clStr = "class=‘"
+ sets.markClass + "‘";

    } else
{

        clStr = "style=‘color:"
+ sets.markColor + ";‘";

    }

    //对前一次高亮处理的文字还原    

    $("span[data-keyrole=‘mark‘]").each(function() {

        var
text = document.createTextNode($(this).text());

        $(this).replaceWith($(text));

    });

    //字符串正则表达式关键字转化

    $.regTrim = function(s) {

        var
imp = /[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g;

        var
imp_c = {};

        imp_c["^"] = "\\^";

        imp_c["."] = "\\.";

        imp_c["\\"] = "\\\\";

        imp_c["|"] = "\\|";

        imp_c["("] = "\\(";

        imp_c[")"] = "\\)";

        imp_c["*"] = "\\*";

        imp_c["+"] = "\\+";

        imp_c["-"] = "\\-";

        imp_c["$"] = "\$";

        imp_c["["] = "\\[";

        imp_c["]"] = "\\]";

        imp_c["?"] = "\\?";

        s = s.replace(imp, function(o) {

            return
imp_c[o];

        });

        return
s;

    };

    $(this).each(function() {

        var
t = $(this);

        str = $.trim(str);

        if
(str === "") {

            //alert("Keyword is empty.");

            return
false;

        } else
{

            //将关键字push到数组之中

            var
arr = [];

            if
(sets.divFlag) {

                arr = str.split(sets.divStr);

            } else
{

                arr.push(str);

            }

        }

        var
v_html = t.html();

        //删除注释

        v_html = v_html.replace(/<!--(?:.*)\-->/g, "");

        //过滤HTML片段

        var
tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;

        var
a = v_html.match(tags), test = 0;

        $.each(a, function(i, c) {

            if
(!/<(?:.|\s)*?>/.test(c)) {//非标签

                //开始执行替换

                $.each(arr, function(index, con) {

                    if
(con === "") {

                        return;

                    }

                    var
reg = new
RegExp("("
+ $.regTrim(con) + ")", "ig");

                    if
(reg.test(c)) {

                        //正则替换

                        c = c.replace(reg, "#♂spstart# $1 #♂spend#");

                        test = 1;

                    }

                });

                c = c.replace(/#♂spstart#/g, "<span data-keyrole=‘mark‘ " + clStr + ">").replace(/#♂spend#/g, "</span>");

                a[i] = c;

            }

        });

        //将支离数组重新组成字符串

        var
new_html = a.join("");

        $(this).html(new_html);

        if
(test === 0 && sets.nullReport) {

            alert("No result found in this page.");

            return
false;

        }

        sets.callback();

        if
(sets.scroll) {

            //自动滚动

            $.tmp_textSearch_str = $.tmp_textSearch_str || str;

            if
($.tmp_textSearch_str == str) {

                $.tmp_textSearch_scollCount = $.tmp_textSearch_scollCount === undefined ? 0 : ($.tmp_textSearch_scollCount + 1);

            } else
{

                $.tmp_textSearch_str = str;

                $.tmp_textSearch_scollCount = 0;

            }

            var
span = $("span[data-keyrole=‘mark‘]")[$.tmp_textSearch_scollCount];

            if
(!span) {

                $.tmp_textSearch_scollCount = 0;

                span = $("span[data-keyrole=‘mark‘]")[0];

            }

            var
toTop = $(span).offset().top - 10;

            $(‘html,body‘).animate({scrollTop: toTop}, window.navigator.appName == ‘Opera‘
? 0 : 100);

        }

    });

};

  

时间: 2024-10-12 18:58:45

纯JS搜索页面内容-我的扩展版本的相关文章

如是使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: <div id="p1"> <p>联系人:张三</p> <

如何使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: 1 <div id="p1"> 2 <p>联系人:张三</p>

使用clipboard.js复制页面内容到剪切板

最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了

使用JS导出页面内容到Excel

JS代码 <script> $(function(){ // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码 var html = '\<html\>\<head\>\<meta charset="utf-8" \/\>\<\/head\>\<body\>' + document.g

js 获取页面内容可见区域的高度和宽度

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //height var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //width

纯js实现页面返回顶部的动画

啥也不说了,直接上代码 1 var scrollTop = document.body.scrollTop; 2 document.body.style.marginTop = -scrollTop + 'px'; 3 document.body.scrollTop = 0; 4 document.body.style.transition = 'all 1s ease-in-out'; 5 document.body.style.marginTop = 0; 6 setTimeout(func

js 打印页面内容

function Pageprint(tid) {           var oldHTNL= document.body.innerHTML;           document.body.innerHTML = document.getElementById(tid).innerHTML;            window.print();            document.body.innerHTML = oldHTNL; }; onclick="Pageprint('tid'

PHP 爬虫体验(三) - 使用PHP + puppeteer爬取js动态渲染的页面内容

之前写的两篇爬虫体验基本上涵盖了一般的Html页面提取场景,但是有些时候,如果目标页面不是纯静态的页面,而是使用js动态渲染的页面(比如one),之前的爬虫就不好使了,这种时候就要借助一些其他工具来进行实现. 一般爬取动态页面的思路是通过软件模拟浏览器行为获取到渲染后的页面镜像,然后再对渲染后的页面进行分析,常用的工具有selenium,phantomJs,puppeteer等,通过对项目维护程度.对PHP友好度的对比,我选用的是puppeteer. 根据官方介绍,谷歌在2017年开发了自家Ch

纯js页面跳转整理

js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/javascript">           window.location.href="http://updn.cn";     </script>2.window.navigate方式跳转   <script language="javascript