Das Beispiel in diesem Artikel beschreibt die Methode von JavaScript, Webseiten-Schlüsselwörter zu identifizieren und sie darzustellen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier ist eine Demonstration der intelligenten Identifizierung von Webseiten-Schlüsselwörtern und deren Anzeige in Rot. Ich glaube, dieser Effekt ist jedem bekannt Rote Schlüsselwörter sind besser als die programmgesteuerte Ausgabe. Vielmehr werden einige Funktionen an den Browser des Clients übergeben, was den Druck auf den Server entsprechend verringert.
Ein Screenshot des Laufeffekts lautet wie folgt:
Die Online-Demo-Adresse lautet wie folgt:
http: //demo.jb51.net/ js/2015/js-keyword-show-red-color-codes/
Der spezifische Code lautet wie folgt:
<!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('p');
for(i=0;i<ps.length;i++){
var text = ps[i].innerHTML;
var index = text.indexOf(':');
var span = document.createElement('span');
span.innerHTML = text.substring(0,index+1);
ps[i].innerHTML = text.substring(index+1);
ps[i].insertBefore(span,ps[i].firstChild);
}
</script>
</body>
</html>Der Oben finden Sie den gesamten Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!
