m0_73009965 2022-07-28 06:37 采纳率: 33.3%
浏览 588
已结题

highlight高亮问题

我们网站在选中某个单词标记高亮后，在最后保存页面，所有和这个一样的单词都会被自动标记高亮，我们只需要之前这一个单词高亮标记，有没有可以解决的，高价求

img

  • 写回答

14条回答 默认 最新

  • eq0284 2022-07-28 14:28
    关注
    
<html>

<head>

    <script type="text/javascript">
        function saveHighlight() {
            let sel = window.getSelection();
            let range = sel.getRangeAt(0);
            console.log(range)
            let startNode = range.startContainer;
            let endNode = range.endContainer;

            if (startNode.nodeType == 3) {
                var startIsText = true;
                var startFlag = startNode.parentNode;
                startNode = startNode.nodeValue;
            } else {
                var startIsText = false;
                var startFlag = startNode;
            }
            if (endNode.nodeType == 3) {
                var endIsText = true;
                var endFlag = endNode.parentNode;
                endNode = endNode.nodeValue;
            } else {
                var endIsText = false;
                var endFlag = endNode;
            }

            let startOffset = range.startOffset;
            let endOffset = range.endOffset;

            let startTagName = startFlag.nodeName;
            let startHTML = startFlag.innerHTML;

            let endTagName = endFlag.nodeName;
            let endHTML = endFlag.innerHTML;

            let rInfo = {
                startNode: startNode,
                startOffset: startOffset,
                startIsText: startIsText,
                startTagName: startTagName,
                startHTML: startHTML,

                endNode: endNode,
                endOffset: endOffset,
                endIsText: endIsText,
                endTagName: endTagName,
                endHTML: endHTML
            };
            let highlight_position_list = JSON.parse(window.localStorage.getItem("highlight_position_list") || '[]')
            highlight_position_list.push(rInfo)
            window.localStorage.setItem("highlight_position_list", JSON.stringify(highlight_position_list));
            highlight(sel);
        }


        function getHighlight() {
            let highlight_position_list = JSON.parse(window.localStorage.getItem("highlight_position_list") || '[]')
            // use(highlight_position_list[0]);
            for (let position of highlight_position_list) {
                use(position);
            }
            window.localStorage.removeItem("highlight_position_list");
        }

        function findEle(tagName, innerHTML) {
            let list = document.getElementsByTagName(tagName);
            for (let i = 0; i < list.length; i++) {
                if (list[i].innerHTML == innerHTML) {
                    return list[i];
                }
            }
        }

        function show(startNode, startIsText, startOffset,
            endNode, endIsText, endOffset, sP, eP) {
            var s, e;
            if (startIsText) {
                let childs = sP.childNodes;
                for (let i = 0; i < childs.length; i++) {
                    if (childs[i].nodeType == 3 && childs[i].nodeValue == startNode)
                        s = childs[i];
                }
            } else {
                s = startNode;
            }
            if (endIsText) {
                let childs = eP.childNodes;
                for (let i = 0; i < childs.length; i++) {
                    if (childs[i].nodeType == 3 && childs[i].nodeValue == endNode)
                        e = childs[i];
                }
            } else {
                e = startNode;
            }



            // 开始高亮
            let range = document.createRange();
            range.setStart(s, startOffset);
            range.setEnd(e, endOffset);

            let sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);

            // 开启文档编辑
            document.designMode = 'on'
            document.execCommand('BackColor', false, "yellow")
            document.designMode = 'off'
            // 去掉默认选中的蓝色
            window.getSelection().empty()
        }

        function use(obj) {
            let sP = findEle(obj.startTagName, obj.startHTML);
            let eP = findEle(obj.endTagName, obj.endHTML);
            show(
                obj.startNode,
                obj.startIsText,
                obj.startOffset,
                obj.endNode,
                obj.endIsText,
                obj.endOffset,
                sP,
                eP
            );
        }

        function highlight(sel) {
            // 开启文档编辑
            document.designMode = 'on'
            range = sel.getRangeAt(0)
            if (range) {
                sel.removeAllRanges()
                sel.addRange(range)
            }
            document.execCommand('BackColor', false, "yellow")

            document.designMode = 'off'
            // 去掉默认选中的蓝色
            window.getSelection().empty()
        }

    </script>

</head>

<body id="content">
    我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本我是高亮文本
    <button onclick="saveHighlight()">高亮</button>
    <button onclick="getHighlight()">加载上一次高亮结果</button>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(13条)

报告相同问题？

问题事件

  • 提问应符合社区要求 8月15日
  • 系统已结题 8月6日
  • 已采纳回答 7月29日
  • 请采纳用户回复 7月29日
  • 展开全部

悬赏问题

  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮