`
Beaver's
  • 浏览: 396057 次
  • 性别: Icon_minigender_2
  • 来自: 天津
社区版块
存档分类
最新评论

js 实现高亮

    博客分类：
  • web
 
阅读更多
最近在做一个平台，搜索关键字，展示包含该关键字的源码文件列表，点击进入源码后要求高亮关键字，用js 实现了关键字高亮，参考源码如下： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UFT-8">
        <title>Untitled Document</title>
        <script>
            //高亮显示搜索到的关键字
            function HeightLight(Keyword)
            {
                //文本选择器
                var TextRange;
                //是否找到
                var Found=false;
                //找到的次数
                var Count = 0;
                TextRange = document.body.createTextRange();
                
                Found = TextRange.findText(Keyword);
                if (Found) 
                {
                    Count++;
                }

                while (Found && Count > 0) 
                {

                    TextRange.pasteHTML('<span style="background:yellow">' + Keyword + '</span>');
                    //将滚动条定位到第一次查到的视口范围内
                    if(Count==1)
                    {
                        TextRange.scrollIntoView();
                    }
                    //继续查找
                    Found = TextRange.findText(Keyword);
                    if (!Found) 
                    {
                        Count = 0;
                    }
                    else 
                    {
                        Count++;
                    }
                }
            }
      </script>
    </head>
    <body onload="Show();">
		<script>
			function Show()
			{
				HeightLight('window');  
			}
      </script>
        <h1>page</h1>
        <h1>page 系统</h1>
        <h1>page 系统</h1>
        <h1>page</h1>
        <h1>page</h1>
        <h1>page 系统</h1>
        <h1>page window系统</h1>
        <h1>page</h1>                           
    </body>
</html>


分享到：
| mysql load 数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js代码高亮显示 JavaScript代码高亮 jsp

    JavaScript代码高亮显示是提高代码可读性的关键工具，通过使用像Highlight.js或Prism.js这样的库，可以在JSP页面上轻松实现这一功能。了解如何正确地集成和配置这些库，可以帮助开发者创建更专业、更易于阅读的代码...

    javascript实现代码高亮

    总的来说，`highlight.js`为JavaScript实现代码高亮提供了一个强大且灵活的解决方案。它不仅能够美化代码显示，还能帮助开发者轻松地定制和扩展高亮功能，提升网页的用户体验。通过深入学习和实践，我们可以更好地...

    代码高亮显示javascript插件

    这个过程通常由JavaScript库来实现，它们通常包含预定义的语法规则和样式设置。 二、JavaScript代码高亮插件的作用 1. 提升可读性：代码高亮插件可以将代码的各个部分以不同的颜色和样式展示，帮助读者快速区分...

    css+js实现部分区域高亮可编辑遮罩层.docx

    "css+js实现部分区域高亮可编辑遮罩层" 本文主要介绍了使用css和js实现部分区域高亮可编辑遮罩层的方法。该方法使用javascript和css来实现遮罩层的效果，遮罩层可以高亮显示指定区域，并且可以编辑该区域。 知识点...

    jS 正则表达式实现关键字高亮显示

    例如，将关键词包裹在`&lt;span class="highlight"&gt;`和`&lt;/span&gt;`之间，以实现高亮显示。 ```javascript function highlightKeywords(text, keywords) { const regex = new RegExp(keywords.join("|"), "gi"); return...

    js实现代码示例（高亮、行号和格式）

    以下将详细介绍如何使用JavaScript实现这些功能。 1. 代码高亮： 代码高亮是通过识别代码中的关键字、变量、函数等特定语法结构，然后用不同的颜色或样式进行标记，以突出显示。JavaScript中常用的库有`Prism.js`...

    jquery高亮插件（支持textarea内容高亮）

    **jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。在网页开发中，有时我们需要对页面上的特定文本或者关键词进行...

    Swing实现编辑器（支持语法高亮）

    在Swing中实现语法高亮，通常涉及到以下步骤： 1. **选择合适的文本模型**：JTextPane使用 StyledDocument 模型，它可以对文本的不同部分应用不同的样式，如字体、颜色和背景色，这对于语法高亮至关重要。 2. **...

    导航菜单点击切换时保持高亮状态（JS实现）示例代码demo1.html

    导航菜单点击切换时保持高亮状态（JS实现）示例代码。尝试每个页面的导航栏目后加class=“active”属性进行修改不成功，这时就需要灵活使用javascript来搞定，主要用到添加类样式addClass()，删除类样式removeClass...

    实现网页高亮查找的JS代码

    下面，我们将深入探讨如何使用JavaScript实现这个功能。 首先，我们需要理解JavaScript的基本语法和DOM（Document Object Model）的概念。DOM是HTML或XML文档的结构化表示，允许我们通过编程方式访问和修改页面内容...

    易语言超级编辑框实现的javascript代码高亮

    在这个场景中，我们关注的是如何在易语言的“超级编辑框”中实现JavaScript代码的高亮显示。 超级编辑框是易语言提供的一种高级文本编辑控件，它不仅支持基本的文本输入和编辑，还能实现更复杂的功能，如代码语法...

    react中实现搜索结果中关键词高亮显示

    正则表达式的使用是实现高亮显示的关键，它允许我们使用通配符和量词等来定义复杂的匹配模式。在示例中，正则表达式是通过RegExp构造函数创建的，其中第一个参数是关键词，第二个参数"g"表示全局匹配，即匹配整个...

    Google语法高亮JavaScript功能

    要使用Google语法高亮JavaScript，首先需要在HTML文件中引入相关的JS库。然后，可以使用特定的HTML标签或者CSS类来标记需要高亮的代码段。例如，使用 `&lt;pre&gt;` 和 `&lt;code&gt;` 标签包裹代码，或者在代码块元素上添加 `...

    JS 代码高亮加复制代码

    这篇博文（尽管描述为空，但根据标题我们可以推测其内容）可能讲解了如何在网页中实现JS代码的高亮显示和添加复制代码的功能。 代码高亮是指在展示代码时，不同类型的语句或关键字用不同的颜色和样式突出显示，以...

    firefox下javascript实现高亮关键词的方法

    然后，将此TextRange对象的`innerText`属性设置为需要高亮的关键词，并应用我们预先定义的CSS样式类，从而实现高亮效果。 在实际应用中，高亮关键词的逻辑可能会涉及到正则表达式的使用，以便在一段文本中查找匹配...

    tinymce代码高亮

    tinymce + syntaxhighlighte实现代码高亮 tinymce + syntaxhighlighte实现代码高亮 tinymce + syntaxhighlighte实现代码高亮 tinymce + syntaxhighlighte实现代码高亮 tinymce + syntaxhighlighte实现代码高亮 ...

    C# HTML SQL常用JS版代码高亮

    用户可以利用JavaScript库，如Prism.js、highlight.js等，通过简单的配置，即可实现多种语言的代码高亮。 6. **文件“JS+gaoliang”**： 这可能是包含实现代码高亮的JavaScript代码或相关的配置文件。根据资源描述...

    flex实现高亮闪烁显示polyline

    ### Flex 实现高亮闪烁显示 Polyline 的方法 在 Flex 中实现高亮闪烁显示 Polyline 是一种常见的图形用户界面设计技巧，特别是在地图应用、数据可视化等领域。本文将详细介绍如何使用 Flex 和相关技术来实现这一...

    标签内JavaScript代码的高亮显示插件

    首先，`&lt;pre&gt;`标签内的JavaScript代码高亮显示插件通常是基于CSS和JavaScript实现的。这类插件通过解析`&lt;pre&gt;`标签内的代码，对关键字、变量、函数等进行不同颜色的标记，使得代码结构清晰，易于阅读。例如，...

Magicbox
Global site tag (gtag.js) - Google Analytics