Maison > Article > interface Web > Comment identifier les mots-clés d'une page Web et les afficher à l'aide de JavaScript

Comment identifier les mots-clés d'une page Web et les afficher à l'aide de JavaScript

PHPzavant: 2016-05-16 15:33:241550parcourir

L'exemple de cet article décrit la méthode JavaScript permettant d'identifier les mots-clés des pages Web et de les restituer. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une démonstration de JavaScript identifiant intelligemment les mots-clés des pages Web et les affichant en rouge. Je pense que cet effet est familier à tout le monde. Utiliser JS pour ajouter. Les mots-clés rouges sont meilleurs que la sortie contrôlée par programme. De plus, certaines fonctions seront transférées au navigateur du client, ce qui réduit d'autant la pression sur le serveur.

Une capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démonstration en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Le ci-dessus est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment utiliser le contrôle du temps jquery UI Datepicker (version améliorée)_jqueryArticle suivant：Comment utiliser le contrôle du temps jquery UI Datepicker (version améliorée)_jquery

Articles Liés

Voir plus