Rumah > Artikel > hujung hadapan web > Cara mengenal pasti kata kunci halaman web dan menjadikannya menggunakan JavaScript

Cara mengenal pasti kata kunci halaman web dan menjadikannya menggunakan JavaScript

PHPzke hadapan: 2016-05-16 15:33:241550semak imbas

Contoh dalam artikel ini menerangkan kaedah JavaScript mengenal pasti kata kunci halaman web dan memaparkannya. Kongsi dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berikut ialah demonstrasi JavaScript yang mengenal pasti kata kunci halaman web secara bijak dan memaparkannya dalam warna merah Saya percaya kesan ini biasa digunakan oleh semua orang kata kunci merah adalah lebih baik daripada output terkawal program Lebih banyak lagi, beberapa fungsi akan diserahkan kepada penyemak imbas pelanggan, yang sewajarnya mengurangkan tekanan pada pelayan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Kod di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila Lawati Tutorial Video JavaScript!

Kenyataan：

Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Cara menggunakan kawalan masa jquery UI Datepicker (versi dipertingkatkan)_jqueryArtikel seterusnya：Cara menggunakan kawalan masa jquery UI Datepicker (versi dipertingkatkan)_jquery

Artikel berkaitan

Lihat lagi