How to identify web page keywords and render them using JavaScript-JS Tutorial-php.cn

How to identify web page keywords and render them using JavaScript

PHPz

Release： 2018-09-28 15:57:35

forward

1548 people have browsed it

The example in this article describes the method of JavaScript identifying web page keywords and rendering them. Share it with everyone for your reference, the details are as follows:

Here is a demonstration of JavaScript intelligently identifying web page keywords and displaying them in red. I believe this effect is familiar to everyone. Using JS to add red keywords is better than program-controlled output. Much more, some functions will be handed over to the client's browser, which accordingly reduces the pressure on the server.

A screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/ js/2015/js-keyword-show-red-color-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS查询替换关键字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<p>我是标题:这里是文字介绍!</p>
<p>我是老二:老二的描述性文字。</p>
<script type="text/javascript">
var ps = document.getElementsByTagName(&#39;p&#39;);
for(i=0;i<ps.length;i++){
  var text = ps[i].innerHTML;
  var index = text.indexOf(&#39;:&#39;);
  var span = document.createElement(&#39;span&#39;);
  span.innerHTML = text.substring(0,index+1);
  ps[i].innerHTML = text.substring(index+1);
  ps[i].insertBefore(span,ps[i].firstChild);
}
</script>
</body>
</html>

Copy after login

The above is the entire content of this chapter. For more related tutorials, please Visit JavaScript Video Tutorial!