用JS实现网页多个关键字高亮显示

iteye_14847

于 2008-10-25 12:44:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/iteye_14847/article/details/81642947

本文介绍了一种在HTML文档中实现关键词高亮显示的方法。通过JavaScript函数HighLight和highword，可以将指定的文本转换为带有样式的HTML元素，以此达到视觉上的突出效果。示例代码展示了如何对页面加载时的特定词汇进行高亮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <title>test</title>
    <script>
    function HighLight(nWord)
    { 
        if(nWord!='')
        { 
            var keyword = document.body.createTextRange(); 
            while(keyword.findText(nWord))
            { 
                keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>"); 
                keyword.moveStart('character',1); 
            } 
        } 
    } 
    function highword(nWord)
    { 
        var array = nWord.split(",");
        for(var i=0;i<array.length;i++)
        {
            HighLight(array[i]);
        }
    } 
    </script> 
</head>
<body onload="highword('Hello,body')">
    <p>Hello every body!</p>
</body>
</html>