爱学习的小朋友 2022-12-10 22:46 采纳率: 88.9%
浏览 42
已结题

jQuery跨多个标签文本高亮的问题,处理方案

jQuery匹配文本高亮,只能单一标签内文本高亮。想跨多个标签应该如何解决呢?

<html> 
<head>
    <meta charset="utf-8">
    <title>搜索文本</title>
    <script src="jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="highlight.js" type="text/javascript"></script>
</head>
<body>
<style>
    .highlight {background-color: #ffff00;color:#ff0000;}
</style>
<b>待匹配文本:</b><div id="font">主人下马客在船,举酒欲饮无管弦</div>
<br>
<b>正文部分:</b>
<br>
<div id="contentid">
    <div>
        <p><span>浔阳江头夜<strong>送客</strong></span><span></span><span>枫叶荻花秋瑟瑟</span></p>
    </div>
    <div>
        <p><span>主人下马客在船,</span><span>举酒欲饮无<strong>管弦</strong></span></p>
    </div>
    <div>
        <p><span>醉不成欢惨<strong>将别</strong></span><span>别时茫茫江浸月</span></p>
    </div>
    <div>
        <p><span>忽闻水上琵琶声,</span><span>主人忘归<strong>客不发</strong></span></p>
    </div>
    <div>
        <p><span>寻声暗问弹者谁,</span><span>琵琶声停<strong>欲语迟</strong></span></p>
    </div>
    <div>
        <p><span>移船相近邀相见,</span><span>添酒回灯重开宴</span></p>
    </div>
    <div>
        <p><span>千呼万唤<strong>始出来</strong></span><span>犹抱琵琶半遮面</span></p>
    </div>
    <div>
        <p><span>转轴拨弦三两声,</span><span>未成曲调先有情</span></p>
    </div>
    <div>
        <p><span>弦弦掩抑<strong>声声思</strong></span><span>似诉平生不得志</span></p>
    </div>
    <div>
        <p><span>低眉信手<strong>续续弹</strong></span><span>说尽心中无限事</span></p>
    </div>
</div>
<br>
<button id="bbt">测试匹配高亮</button>
<script>
    $('#bbt').click(function(){
        var hight = $('#font').text();
                if(hight != undefined  && hight.length > 0){
                    var maincontent = $('#contentid');
                        maincontent.removeHighlight();
                        maincontent.highlight(hight);
                    console.log(hight);
                } else {                        
                console.log("匹配文本为空");
                }
    });
</script>
</body> 
</html>

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-12-11 00:08
    关注

    根据题主结构大概写的。主要用到Selection和Range对象。

    <html>
    <head>
        <meta charset="utf-8">
        <title>搜索文本</title>
        <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
        <style>
            .highlight {
                background-color: #ffff00;
                color: #ff0000;
            }
        </style>
        <b>正文部分:</b>
        <br>
        <div id="contentid">
            <div>
                <p><span>浔阳<b>江头</b><strong>送客</strong></span><span></span><span>枫叶荻花秋瑟瑟。</span></p>
            </div>
            <p>&nbsp;</p><!--有空格行-->
            <div>
                <p><span>主人下马客在船,</span><span>举酒欲饮无<strong>管弦</strong></span></p>
            </div>
    
        </div>
        <br>
        <button id="bbt">测试匹配高亮</button>
        <script>
            $('#bbt').click(function () {
                let words = prompt('请输入要匹配内容', `枫叶荻花秋瑟瑟。 主人下马客在船`);
                if (!words) return;
                words = words.match(/([\u4e00-\u9fa5]+)/g);//拆分中中文数组,去掉符号之类
                if (!words) return;
                $('span.highlight').removeClass('highlight')
                for (let word of words) {
                    let finded = window.find(word);
                    if (!finded) finded = window.find(word, false, true, true)
                    if (finded) {
                        let range = window.getSelection().getRangeAt(0);
                        if (range.startContainer == range.endContainer) {
                            range.startContainer.parentNode.className = 'highlight'
                        }
                        else
                        range.commonAncestorContainer.className ='highlight'
                    }
                }
                window.getSelection().removeAllRanges()
            });
        </script>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月21日
  • 已采纳回答 12月13日
  • 创建了问题 12月10日

悬赏问题

  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加
  • ¥15 用ns3仿真出5G核心网网元
  • ¥15 matlab答疑 关于海上风电的爬坡事件检测
  • ¥88 python部署量化回测异常问题
  • ¥30 酬劳2w元求合作写文章
  • ¥15 在现有系统基础上增加功能
  • ¥15 远程桌面文档内容复制粘贴,格式会变化
  • ¥15 这种微信登录授权 谁可以做啊