Heim > Artikel > Web-Frontend > So identifizieren Sie Webseiten-Schlüsselwörter und rendern sie mithilfe von JavaScript

So identifizieren Sie Webseiten-Schlüsselwörter und rendern sie mithilfe von JavaScript

PHPznach vorne: 2016-05-16 15:33:241550Durchsuche

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(&#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>

Der Oben finden Sie den gesamten Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So verwenden Sie die Zeitsteuerung von jquery UI Datepicker (erweiterte Version)_jqueryNächster Artikel：So verwenden Sie die Zeitsteuerung von jquery UI Datepicker (erweiterte Version)_jquery

In Verbindung stehende Artikel

Mehr sehen