js搜索代碼（js搜索框代碼）

本文目錄一覽：

• 1、js搜索框代碼
• 2、JavaScript靜態搜索
• 3、JS如何查找源代碼
• 4、用JS將搜索的關鍵字高亮顯示實現代碼
• 5、求一段JS代碼，要求搜索當前頁面，如果發現當前頁面中有設定的字元，就給出提示
• 6、如何查看網頁的JS代碼

js搜索框代碼

    /* 問題不夠明確 */

    input class=”ipt_search” type=”search” placeholder=”請輸入搜索內容”/

    script

        /* 搜索input */

        var searchIpt = document.getElementsByClassName(‘ipt_search’)[0];

        /* 搜索內容 */

        var searchValue = searchIpt.value;

    /script

JavaScript靜態搜索

代碼：

1 form.htm

起始頁面，頁面里有查詢框。

script language=”javascript”

function gosearch(){

if (str.value==””){ alert (“請輸入查找的內容！”); return false; }

window.location=”query.htm?”+str.value;

}

function getkey(){

if(window.event.keyCode == 13) gosearch();

}

/script

input name=”str” type=”text” id=”str” /

input type=”button” name=”Button” value=”查找” onclick=”gosearch()” /

script

str.focus();

document.onkeydown=getkey;

/script

2 query.htm

搜索頁面，接收上個頁面 傳來的參數。

script language=”javascript”

var titlearray = new Array(); //關鍵字數組

var urlarray = new Array(); //超級鏈接數組

var fitarray = new Array(); //符合要求的數組

/script

script type=”text/javascript” src=”title.js”/script//載入關鍵字

script type=”text/javascript” src=”url.js”/script//載入超級鏈接

script language=”javascript”

var args = window.location.href.split(“?”);//用問號為間隔，各個參數寫入數組args

var target = args[1]; //要找的字元串

for (var i=0; ititlearray.length; i++){

if (titlearray[i].indexOf(target)!=-1){

fitarray.push(i);//將要找的結果寫入數組。也可以不用數組，直接顯示。

}

}

var resultstr = “”;

if (fitarray.length ==0 ){

resultstr += “抱歉，沒有找到資料。”;

}

for (j in fitarray){

resultstr += “a href=\””+ urlarray [fitarray[j]] +”\” target=\”_blank\””+ titlearray[fitarray[j]]+”

“;//結果內容賦值給了resultstr

}

/script

div id=”result”/div

script language=”javascript”

document.getElementById(“result”).innerHTML += resultstr;//顯示結果內容

/script

3 title.js 關鍵字文件

titlearray [0] = “keyword1”;

titlearray [1] = “keyword2”;

titlearray [2] = “keyword3”;

url.js 超級鏈接文件

urlarray [0] = “1.htm”;

urlarray [1] = “2.htm”;

urlarray [2] = “3.htm”;

這兩個文件需要下標對應，不能錯位。

JS如何查找源代碼

html

head

meta http-equiv=”Content-type” content=”text/html; charset=utf-8″

title遠程網頁源代碼讀取/title

style type=”text/css”

/* 頁面字體樣式 */

body, td, input, textarea {

font-family:Arial;

font-size:12px;

}

/style

script type=”text/javascript”

//用於創建XMLHttpRequest對象

function createXmlHttp() {

//根據window.XMLHttpRequest對象是否存在使用不同的創建方式

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創建方式

} else {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE瀏覽器支持的創建方式

}

}

//直接通過XMLHttpRequest對象獲取遠程網頁源代碼

function getSource() {

var url = document.getElementById(“url”).value; //獲取目標地址信息

//地址為空時提示用戶輸入

if (url == “”) {

alert(“請輸入網頁地址。”);

return;

}

document.getElementById(“source”).value = “正在載入……”; //提示正在載入

createXmlHttp(); //創建XMLHttpRequest對象

xmlHttp.onreadystatechange = writeSource; //設置回調函數

xmlHttp.open(“GET”, url, true);

xmlHttp.send(null);

}

//將遠程網頁源代碼寫入頁面文字區域

function writeSource() {

if (xmlHttp.readyState == 4) {

document.getElementById(“source”).value = xmlHttp.responseText;

}

}

/script

/head

body

h1遠程網頁源代碼讀取/h1

div

地址：input type=”text” id=”url”

input type=”button” onclick=”getSource()” value=”獲取源碼”

/div

textarea rows=”10″ cols=”80″ id=”source”/textarea

/body

/html

我也是別人那抄的 你試試吧 好的話給我個最佳

用JS將搜索的關鍵字高亮顯示實現代碼

用JS讓文章內容指定的關鍵字加亮

是這樣的..

現在有這些關鍵字:美容,生活,購物

當在文章裡頭出現這些關鍵字,就把它加亮顯示..

文章是生成靜態頁面的,而這些關鍵字是能隨時更新的,所以我想用JS來實現…

不知道怎樣來實現這樣的功能啊?特此求助

複製代碼

代碼如下:

script

language=”JavaScript”

function

highlight(key)

{

var

key

=

key.split(‘|’);

for

(var

i=0;

ikey.length;

i++)

{

var

rng

=

document.body.createTextRange();

while

(rng.findText(key[i]))

//rng.pasteHTML(rng.text.fontcolor(‘red’));

rng.pasteHTML(‘div

style=”border:1

solid

red;display:inline”a

href=”#”

title=”+

rng.text

+”‘

+

rng.text

+

‘/a/div’);

}

}

highlight(‘文章|關鍵|功能’)

/script

求一段JS代碼，要求搜索當前頁面，如果發現當前頁面中有設定的字元，就給出提示

html

script

  function searchWords() {

    var words = document.getElementById(‘search’).value;

    if (words != ”) {

      var innerHTML = document.body.innerHTML;

      if (innerHTML.indexOf(words) != -1) {

        alert(‘找到了’);

        if (words == ‘123’) {

          alert(‘123不作操作’);

        } else if (words == ‘456’) {

          alert(‘456跳轉頁面’);

          window.location.href = ”;

        } else if (words == ‘567’) {

          alert(‘567替換內容’);

          document.body.innerHTML = innerHTML.replace(new RegExp(/(567)/g),’789′);

        }

      }

    }

  }

/script

body

div123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ/div

divinput id=’search’ type=’text’ placeholder=’請輸入查詢字元’ /button onclick=’searchWords();’查詢/button/div

/body

/html

如何查看網頁的JS代碼

瀏覽器查看。

用Chrome、火狐等（其它瀏覽器操作類同），打開瀏覽器後，按F12。或者打開開發者工具，可以查看相應的html、css、js等內容。

效果圖如下（查看源碼）