<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS关键字文本高亮</title> </head> <body> <div id="content"> 有过于江上者，见人方引婴儿而欲投之江中，婴儿啼。人问其故。曰：“此其父善游。” 其父虽善游，其子岂遽善游哉？以此任物，亦必悖矣。 有个经过江边的人，看见一个人正拉着一个小孩要把他投到江里去，小孩吓得直哭。过江的人忙问这样做的原因，那人回答：“这孩子的父亲擅长游泳。” 孩子的父亲虽然擅长游泳，这个小孩难道也立即会游泳吗？这样处理事情，肯定是谬误的啊！ </div> <script> var content = document.getElementById("content"); var contents = content.innerHTML; var text = document.getElementById("text"); var value = '的'; var values = contents.split(value); document.body.innerHTML = values.join('<span style="background:red;">' + value + '</span>'); </script> </body> </html> <br /> <br /> <br /> <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>关键字文本高亮</title> </head> <body> <div id="content"> 有过于江上者，见人方引婴儿而欲投之江中，婴儿啼。人问其故。曰：“此其父善游。” 其父虽善游，其子岂遽善游哉？以此任物，亦必悖矣。 有个经过江边的人，看见一个人正拉着一个小孩要把他投到江里去，小孩吓得直哭。过江的人忙问这样做的原因，那人回答：“这孩子的父亲擅长游泳。” 孩子的父亲虽然擅长游泳，这个小孩难道也立即会游泳吗？这样处理事情，肯定是谬误的啊！ </div> <input type="text" id="text" placeholder="请输入关键字" /> <input type="button" id="button" value="确定" /> <script> var content = document.getElementById("content"); var contents = content.innerHTML; var text = document.getElementById("text"); var button = document.getElementById("button"); button.onclick = function() { var value = text.value; var values = contents.split(value); content.innerHTML = values.join('<span style="background:red;">' + value + '</span>'); }; </script> </body> </html>
