js 实现高亮

最新推荐文章于 2024-04-08 11:12:30 发布

iteye_14742

最新推荐文章于 2024-04-08 11:12:30 发布

阅读量380

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/iteye_14742/article/details/82303708

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近在做一个平台，搜索关键字，展示包含该关键字的源码文件列表，点击进入源码后要求高亮关键字，用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>

iteye_14742

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现高亮

最近在做一个平台，搜索关键字，展示包含该关键字的源码文件列表，点击进入源码后要求高亮关键字，用js 实现了关键字高亮，参考源码如下：[code="java"] Untitled Document //高亮显示搜索到的关键字 function HeightLight(...
复制链接

扫一扫

专栏目录