jq版本搜索文本关键字高亮

没理由的花呗

已于 2022-03-19 10:23:25 修改

阅读量423

点赞数

分类专栏： jquery 文章标签： jquery javascript html5 html 前端

于 2020-05-25 21:20:57 首次发布

本文链接：https://blog.csdn.net/m0_37296026/article/details/106342379

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang=“en”>

<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Document</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>

<body>
    <input type=“text” id=“search”>
    <button id=“searchBtn”>搜索</button>
    <div class=“container”>

        　　他是无意穿堂风，却偏偏孤据引山洪。我是垂眉摆渡翁，却独独偏爱哝。

        　　忽然想起那年夏日毕业之际，我送他的藏头巧妙情诗，还有在QQ的匿名坦白说，还有我第一次鼓起勇气隐晦的告白，毕业后我想着也许在我们笑着说再见时候深知再见遥遥无期，我想过叫他一起来学习预习新课，如今想想对我而言珍贵如斯，因为整整初中三年我都喜欢他，从始至终，从一开始和他一个组，就喜欢他。可是我也心里早已隐隐知道他喜欢的是另外一个人，我怕喜欢被他知道，也怕他不知道，又怕他装作不知道，总是假装不在意他，却总是留意他的消息，其实也是只要他没有说出来证实那个我知道他喜欢另外一个人的猜想，我就还抱着一丝期待，才没办法停止喜欢。这世上最安慰人的童话是，你挖空心思暗恋的人，他也挖空心思暗恋你，可惜这只是童话。

        　　我记得我无数次点开对话框，却只好失望的再关掉。我好多时候都想着万一他真的喜欢是她，我应该狠下心割舍这份感情，毕竟我不想太黯然神伤，我总是假装不在意远离他，不是因为讨厌陌生，而是太喜欢，又怕表现的明显，明知道没有什么可能不想陷入的更深。有那么一些瞬间，我假装不在意的擦肩而过，恰好离他很近，几分毫之差，却像是我们之间隔了银河的距离。走不进他的世界，却不想退出，现在想想初中三年除了开始在一个小组过，就没有再怎么交集过多少，毕业后反倒可以频繁的交集，我很珍惜，也行对他而言不过尔尔，充其量我只能算是他一个普通朋友。

        　　犹记得那次初三模考后不好，本来就难受从未那么差过，可是他在安慰另外一个人，我就更难过。多少次狠下心不想喜欢，却是告终。

        　　比如毕业后，我开着玩笑跟他要生日礼物，终究是一纸空话，而我也知道也许他是不想给也就罢了，毕竟我什么都算不上吧，还有我那次想叫他去看电影，看最好的我们，我是有目的，听说电影的最后彩蛋是告白带来这里一起看电影的人是为了对他告白，可惜他没去，我和我一个很好的闺蜜去了电影院。

        　　其实毕业后，我有过暗示，他懂了，懂了后是沉默，我早该明白的，沉默就是答案，躲闪就是答案，不过是留一个情面给我，互相都不要太过难堪，他也不知道，我很多说说日志写着是希望他能看到的，虽然有些不是我的原创，却带着我的心声，他不曾懂过。也不需要去懂了，从始至终感动的只有我自己。海底月捞不起，心上人不可及，向来心是看客心，奈何人是局中人。

        　　这世间最难不过徒手摘月，喜欢而不得。

        　　但我也想明白了，当我不能将一个人彻底忘却，就好好珍藏，封存在某个不易察觉的角落，午夜阑珊的时候悄悄想去。生不逢时，喜欢不逢人，所得之处皆是命数。白茶清欢无别事，我在等风也等你，苦酒折留今相离，无风无月也无你。

        　　当年我说的凤囚凰那首诗也许他早已忘记，有美人兮，见之不忘，一日不见兮，思之如狂。凤飞遨翔兮，四海求凰，无奈佳人兮，不在东墙。将琴代语兮，聊写衷肠，愿言配德兮，携手相将。何时见许兮，慰我旁徨，不得于飞兮，使我沦亡，使我沦亡。本想暗示他我喜欢过他，终是没有说出口下阙。

        　　蝴蝶很美，终究飞不过沧海，某些性质上我和他一样，都是内心远没有看起来的风平浪静，实则是波涛起伏，曾想过愿我如星君如月，夜夜流光相皎洁。

        　　所谓执念，不过求而不得，不过难以割舍，不想错过，可终究情深是我，缘浅是我们，落花有意，流水无情，竟是付诸东流，若是如此，就这样吧，从此山水不相逢，愿若干年后的我们是最好的我们，蝴蝶很美，终究飞不过沧海，生生的两端，我们彼此站成岸。何来人间一惊鸿，不过人间一俗人。从此相忘江湖，若许不相识，也愿我遇到比你更好的人，说了那么多轻松多了，写下这些也是为了忘记放下他，虽然以前想过有时候放不下是最好的放下，无论他是否看得到，就这样吧，至此纪念我初中的喜欢，你是年少的欢喜，但也是过去时。我也要努力学习，考的比他更好。
    </div>
    <script src="jquery.js"></script>
    <script>
        $("#searchBtn").on("click", function () {
            // 使用jq方法 清空已经标记的span标签
            // jQuery 1.4 新增 unwrap函数。
            if ($('.highlight').length > 0) {
                $(".highlight").contents().unwrap();
            }
            let regExp = new RegExp($("#search").val(), 'g');
            $('.container').each(function () {
                const html = $(this).html();
                const pattern = /<\/?.+?\/?>/g;
                if (!html.match(pattern)) {
                    const newHtml = html.replace(regExp, `<span class="highlight">${$("#search").val()}</span>`);
                    $(this).html(newHtml);
                }
            })
        })

没理由的花呗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq版本搜索文本关键字高亮

<!DOCTYPE html><html lang=“en”><head><meta charset=“UTF-8”><meta name=“viewport” content=“width=device-width, initial-scale=1.0”><title>Document</title><style>.highlight {color: red;}</style>
复制链接

扫一扫