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

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条)

报告相同问题？

  • 前端实现指定文件高亮并进行跳转:Highlight
    2025-03-24 15:42
    梦琪养乐多的博客 针对上面的问题，在这里我对需要筛选高亮的的词与插件找到分片的词进行组合比对，如果符合，则保留当前ID，因为涉及到滚动，我这里采用了锚点的形式，因此自定义渲染形式将其渲染为a标签，那么后续只需要指定跳转的...
  • 前端实现检索文本高亮实现
    2023-12-07 00:06
    小马甲丫的博客 使用搜索引擎时的搜索结果高亮，搜索文本在查询出来的结果内高亮显示，这种在全文检索应该很常见本人每篇文章都是一字一句码出来，希望大佬们多提提意见。创作不易，给我打打气，加加油☕。
  • highlight.js实现代码高亮与行号[项目源码]
    2025-12-20 07:04
    随着技术的发展，多种代码高亮工具应运而生，其中highlight.js凭借其轻量、易于集成及广泛兼容的特点受到开发者青睐。然而，最初版本的highlight.js并不支持行号显示，这对于某些应用场景而言是一个缺憾。为解决这一...
  • highlight-OneNote 2016代码高亮插件.zip
    2019-06-24 16:31
    《OneNote 2016代码高亮插件——highlight详解》 在信息化时代，代码已经成为程序员们交流的重要工具，而高效地展示和阅读代码，不仅能让编程工作更轻松，也能提升团队协作的效率。OneNote 2016作为微软出品的一款...
  • 【前端代码高亮】页面代码高亮展示之Highlight高亮组件应用详解，附多个主题效果
    2023-01-11 18:37
    IT黄大大的博客 页面代码高亮展示，Highlight高亮组件应用，highlight多个主题效果，代码高亮美化，前端高亮展示
  • 用 highlight.js 高亮显示代码
    2024-11-13 09:29
    听海边涛声的博客 用 highlight.js 高亮显示代码
  • html语言 高亮代码,HTML highlight 代码前端高亮
    2021-06-10 12:22
    weixin_39825872的博客 前端模板 HTML 文件引入对应的 css 和 js （styles 使用的 css 文件，可以修改成自己喜欢的样式，css 文件路径：joyoo\static_root\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles，前端代码高亮还...
  • 前端显示代码高亮
    2021-07-11 23:26
    雾雨霜星的博客 前端显示代码高亮 Time：2021-3-22 前言 搭建博客网站的过程还真是多bug…什么奇奇怪怪的问题都有，很大原因就是这个VueCLI版本太高级了…都没什么关于这个版本的使用的资料，中文的官方文档简单的就好像什么都没说...
  • 前端项目-highlight.js.zip
    2019-09-02 23:22
    **标题解析：** "前端项目-highlight.js....通过以上解析，我们可以看出 "前端项目-highlight.js.zip" 包含了一个强大的前端代码高亮库，适用于各种前端开发场景，提供了丰富的自定义选项，让代码展示更加专业和美观。
  • 前端：自定义关键词高亮显示
    2022-09-08 16:50
    怕冷的火焰（~杰）的博客 【代码】前端：自定义高亮显示。
  • 【项目实训 08】前端开发记录2——代码高亮实现
    2025-06-03 16:25
    m0_74289999的博客 通过使用highlight.js库并封装为Vue组件，我们成功实现了代码高亮功能，支持多种编程语言（包括JavaScript、TypeScript、ArkTS、HTML、CSS等），提供了美观的代码显示效果。
  • 前端实现页面搜索高亮
    2018-11-08 14:46
    在前端开发中，有时我们需要为用户提供搜索功能，并且在用户搜索到特定关键词时，能够高亮显示这些关键词在页面中的位置。"前端实现页面搜索高亮"这一技术就是用来实现这种用户体验的。在这个主题中，我们将深入探讨...
  • 前端开发实现检索文本高亮
    2024-10-31 21:48
    云隙阳光i的博客 此外，对于大量文本内容的搜索，可能需要考虑性能优化的问题。2、 遍历文本内容：将需要进行搜索的文本内容获取到，并进行遍历。最后，我们将更新后的内容重新赋值给文本容器，从而实现高亮展示效果。4、 更新文本...
  • js使用highlight.js高亮你的代码
    2020-10-19 08:53
    总的来说，`highlight.js`是一款强大的代码高亮工具，它能轻松地与各种前端框架和模块化系统集成，提升代码在网页上的展示效果。只需简单的配置和调用，就能让你的代码高亮起来，让读者更容易理解你的代码示例。
  • vue实现多组关键词对应高亮显示功能
    2020-12-09 19:02
    Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在这个示例中，我们将讨论如何在Vue应用中实现多组关键词的高亮显示功能。这个功能通常用于搜索结果展示或者文本分析，使得用户能够快速识别出关键信息。...
  • highlight.js代码高亮插件[代码]
    2025-11-24 11:54
    调试模式则为开发者提供了一个工具，用以诊断和解决集成Highlight.js时可能遇到的问题。 Highlight.js不仅适用于传统的网页开发，它还特别适合集成到各种现代前端框架和系统中。例如，文章提供了关于如何在HTML和...
  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 <font color=red>原创</font>
    2020-10-21 05:04
    **JavaScript语法高亮插件——highlight.js** 在网页中展示代码时，为了增强代码的可读性和美观性，通常会采用语法高亮显示。`highlight.js` 是一款强大的JavaScript库，用于实现各种编程语言的代码高亮。它支持...
  • 代码高亮_Highlight.js - 前端的代码语法高亮库
    2021-01-13 01:21
    聂家麒的博客 千辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看...Highlight.js简介Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮...
  • 使用highlight 插件高亮 代码片段
    2021-12-10 21:05
    Grey..的博客 npm i highlight.js 2.页面中引入 import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css' 3. 使用原理 对 pre > code 的代码加样式 useEffect(() => { // 配置 highlight.js ...
  • 没有解决我的问题, 去提问

问题事件

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