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

最新推荐文章于 2024-05-19 10:57:04 发布

原创最新推荐文章于 2024-05-19 10:57:04 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

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

部署运行你感兴趣的模型镜像

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

您可能感兴趣的与本文相关的镜像