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>

根据题主结构大概写的。主要用到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>
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632