2. 程式人生 > >JavaScript使用正則表示式實現迷糊查詢

JavaScript使用正則表示式實現迷糊查詢

阿新 • • 發佈：2018-11-19 
	使用者在輸入框中輸入文字時,使用正則在資料區進行檢索,顯示出提示資訊.

<head>
    <meta charset="UTF-8">
    <title>模糊查詢</title>
<style type="text/css">
    body{
        text-align:center;
    }
    #datas{
        display:none;
    }
    #txt{
        font-size:300%;
        width:80%;
        height
 
:10%;
        margin-top:10%;
    }
    #msg{
        margin:0 auto;
        text-align:left;
        width:80%;
        border: medium solid #C0C0C0; 
    }
</style>
</head>
<body>

<form action="" method="post">
<!-- 搜尋框 -->   
<input type="text" id='txt' />
</form>
<!-- 模糊查詢結果顯示框 -->
 

<div id="msg"></div>

<!-- 查詢資料 -->
<div id="datas">
城市,北京市,海淀區,東城區,西城區,宣武區,豐臺區,朝陽區,崇文區,大興區,石景山區,門頭溝區,房山區,通州區,順義區,懷柔區,昌平區,平谷區,密雲縣,延慶縣,天津市,和平區,河西區,河北區,河東區,南開區,紅橋區,北辰區,津南區,武清區,塘沽區,西青區,漢沽區,大港區,寶坻區,東麗區,薊縣,靜海縣,寧河縣 ,上海,黃浦區,盧灣區,徐彙區,長寧區,靜安區,普陀區,閘北區,楊浦區,虹口區,閔行區,寶山區,嘉定區,浦東新區,金山區,松江區,青浦區,南匯區,奉賢區,崇明縣 ,重慶,渝中區,大渡口區,江北區,沙坪壩區,九龍坡區,南岸區,北碚區,萬盛區,雙橋區,渝北區,巴南區,萬州區,涪陵區,黔江區,長壽區,江津區,永川區,南川區,綦江縣,潼南縣,銅梁縣,大足縣,榮昌縣,璧山縣,墊江縣,武隆縣,豐都縣,城口縣,梁平縣,開縣,巫溪縣,巫山縣,奉節縣,雲陽縣,忠縣,石柱土家族自治縣,彭水苗族土家族自治縣,酉陽苗族自治縣,秀山土家族苗族自治縣,新疆維吾爾自治區,烏魯木齊,克拉瑪依,石河子,阿拉爾市,圖木舒克,五家渠,哈密,吐魯番,阿克蘇,喀什,和田,伊寧,塔城,阿勒泰,奎屯,博樂,昌吉,阜康,庫爾勒,阿圖什,烏蘇 ,西藏自治區,拉薩,日喀則,寧夏回族自治區,銀川,石嘴山,吳忠,固原,中衛,青銅峽市,靈武市,內蒙古自治區,呼和浩特,包頭,烏海,赤峰,通遼,鄂爾多斯,呼倫貝爾,巴彥淖爾,烏蘭察布,霍林郭勒市,滿洲裡市,牙克石市,扎蘭屯市,根河市,額爾古納市,豐鎮市,錫林浩特市,二連浩特市,烏蘭浩特市,阿爾山市 ,廣西,南寧,柳州,桂林,梧州,北海,崇左,來賓,賀州,玉林,百色,河池,欽州,防城港,貴港,岑溪,憑祥,合山,北流,宜州,東興,桂平,黑龍江,哈爾濱,大慶,齊齊哈爾,佳木斯,雞西,鶴崗,雙鴨山,牡丹江,伊春,七臺河,黑河,綏化 加格達奇,五常,雙城,尚志,納河,虎林,密山,鐵力,同江,富錦,綏芬河,海林,寧安,穆林,北安,五大連池,肇東,海倫,安達,吉林,長春,吉林,四平,遼源,通化,白山,松原,白城,九臺市,榆樹市,德惠市,舒蘭市,樺甸市,蛟河市,磐石市,公主嶺市,雙遼市,梅河口市,集安市,臨江市,大安市,洮南市,延吉市,圖們市,敦化市,龍井市,琿春市,和龍市,遼寧,瀋陽,大連,金州,鞍山,撫順,本溪,丹東,錦州,營口,阜新,遼陽,盤錦,鐵嶺,朝陽,葫蘆島,新民,瓦房店,普蘭,莊河,海城,東港,鳳城,凌海,北鎮,大石橋,蓋州,燈塔,調兵山,開原,凌源,北票,興城 ,河北,石家莊,唐山,邯鄲,秦皇島,保定,張家口,承德,廊坊,滄州,衡水,邢臺,辛集市,藁城市,晉州市,新樂市,鹿泉市,遵化市,遷安市,武安市,南宮市,沙河市,涿州市,固安..定州市,安國市,高碑店市,泊頭市,任丘市,黃驊市,河間市,霸州市,三河市,冀州市,深州市,山東,濟南,青島,淄博,棗莊,東營,煙臺,濰坊,濟寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,菏澤,濱州,章丘,膠南,膠州,平度,萊西,即墨,滕州,龍口,萊陽,萊州,招遠,蓬萊,棲霞,海陽,青州,諸城,安丘,高密,昌邑,兗州,曲阜,鄒城,乳山,文登,榮成,樂陵,臨清,禹城,江蘇,南京,鎮江,常州,無錫,蘇州,徐州,連雲港,淮安,鹽城,揚州,泰州,南通,宿遷,江陰市,宜興市,邳州市,新沂市,金壇市,溧陽市,常熟市,張家港市,太倉市,崑山市,吳江市,如皋市,通州市,海門市,啟東市,東臺市,大豐市,高郵市,江都市,儀徵市,丹陽市,揚中市,句容市,泰興市,姜堰市,靖江市,興化市,安徽,合肥,蚌埠,蕪湖,淮南,亳州,阜陽,淮北,宿州,滁州,安慶,巢湖,馬鞍山,宣城,黃山,池州,銅陵,界首,天長,明光,桐城,寧國,浙江,杭州,嘉興,湖州,寧波,金華,溫州,麗水,紹興,衢州,舟山,台州,建德市,富陽市,臨安市,餘姚市,慈溪市,奉化市,瑞安市,樂清市,海寧市,平湖市,桐鄉市,諸暨市,上虞市,嵊州市,蘭溪市,義烏市,東陽市,永康市,江山市,臨海市,溫嶺市,龍泉市,福建,福州,廈門,泉州,三明,南平,漳州,莆田,寧德,龍巖,福清市,長樂市,永安市,石獅市,晉江市,南安市,龍海市,邵武市,武夷山,建甌市,建陽市,漳平市,福安市,福鼎市,廣東,廣州,深圳,汕頭,惠州,珠海,揭陽,佛山,河源,陽江,茂名,湛江,梅州,肇慶,韶關,潮州,東莞,中山,清遠,江門,汕尾,雲浮,增城市,從化市,樂昌市,南雄市,臺山市,開平市,鶴山市,恩平市,廉江市,雷州市 吳川市,高州市,化州市,高要市,四會市,興寧市,陸豐市,陽春市,英德市,連州市,普寧市,羅定市,海南,海口,三亞,瓊海,文昌,萬寧,五指山,儋州,東方,雲南,昆明,曲靖,玉溪,保山,昭通,麗江,普洱,臨滄,安寧市,宣威市,箇舊市,開遠市,景洪市,楚雄市,大理市,潞西市,瑞麗市,貴州,貴陽,六盤水,遵義,安順,清鎮市,赤水市,仁懷市,銅仁市,畢節市,興義市,凱裡市,都勻市,福泉市,四川,成都,綿陽,德陽,廣元,自貢,攀枝花,樂山,南充,內江,遂寧,廣安,瀘州,達州,眉山,宜賓,雅安,資陽,都江堰市,彭州市,邛崍市,崇州市,廣漢市,什邡市,綿竹市,江油市,峨眉山市,閬中市,華鎣市,萬源市,簡陽市,西昌市,湖南,長沙,株洲,湘潭,衡陽,岳陽,郴州,永州,邵陽,懷化,常德,益陽,張家界,婁底,瀏陽市,醴陵市,湘鄉市,韶山市,耒陽市,常寧市,武岡市,臨湘市,汨羅市,津市市,沅江市,資興市,洪江市,冷水江市,漣源市,吉首市,武漢,襄樊,宜昌,黃石,鄂州,隨州,荊州,荊門,十堰,孝感,黃岡,咸寧,大冶市,丹江口市,洪湖市,石首市,鬆滋市,宜都市,當陽市,枝江市,老河口市,棗陽市,宜城市,鍾祥市,應城市,安陸市,漢川市,麻城市,武穴市,赤壁市,廣水市,仙桃市,天門市,潛江市,恩施市,利川市,河南,鄭州,洛陽,開封,漯河,安陽,新鄉,周口,三門峽,焦作,平頂山,信陽,南陽,鶴壁,濮陽,許昌,商丘,駐馬店,鞏義市,新鄭市,新密市,登封市,滎陽市,偃師市,汝州市,舞鋼市,林州市,衛輝市,輝縣市,沁陽市,孟州市,禹州市,長葛市,義馬市,靈寶市,鄧州市,永城市,項城市,濟源市,山西,太原,大同,忻州,陽泉,長治,晉城,朔州,晉中,運城,臨汾,呂梁,古交,潞城,高平,介休,永濟,河津,原平,侯馬,霍州,孝義,汾陽,陝西,西安,咸陽,銅川,延安,寶雞,渭南,漢中,安康,商洛,榆林,興平市,韓城市,華陰市,甘肅,蘭州,天水,平涼,酒泉,嘉峪關,金昌,白銀,武威,張掖,慶陽,定西,隴南,玉門市,敦煌市,臨夏市,合作市,青海,西寧,格爾木,德令哈,江西,南昌,九江,贛州,吉安,鷹潭,上饒,萍鄉,景德鎮,新餘,宜春,撫州,樂平市,瑞昌市,貴溪市,瑞金市,南康市,井岡山市,豐城市,樟樹市,高安市,德興市,臺灣,臺北,臺中,基隆,高雄,臺南,新竹,嘉義,板橋市,宜蘭市,竹北市,桃園市,苗栗市,豐原市,彰化市,南投市,太保市,斗六市,新營市,鳳山市,屏東市,臺東市,花蓮市,馬公市 ,特別行政區,香港：中西區,東區,九龍城區,觀塘區,南區,深水埗區,黃大仙區,灣仔區,油尖旺區,離島區,葵青區,北區,西貢區,沙田區,屯門區,大埔區,荃灣區,元朗區,澳門：花地瑪堂區,聖安多尼堂區（花王堂區）,望德堂區,大堂區,風順堂區（聖老楞佐堂區）,離島,氹仔,路環,
</div
 
>  
<script type="text/javascript">  
    function handle(){  
        var data = datas.split(",");
        var word = document.getElementById('txt').value;
        var value = "";
        for(var i = 1;i < data.length;i++){
            if(word!="" && data[i].match(word+".*") != null){
                value += "<a onclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";
            }
        }       
        document.getElementById('msg').innerHTML=value;
    } 
    function add(city){
        document.getElementById('txt').value=city;
    }
    //firefox下檢測狀態改變只能用oninput,且需要用addEventListener來註冊事件。   
    if(/msie/i.test(navigator.userAgent))    //ie瀏覽器   
        {document.getElementById('txt').onpropertychange=handle   
    } else{//非ie瀏覽器，比如Firefox   
        document.getElementById('txt').addEventListener("input",handle,false);   
    }
    var datas = document.getElementById('datas').innerHTML;

</script>  

</body>
</html>

  
    
   
  • 1
    • 
   
  • 2
    • 
   
  • 3
    • 
   
  • 4
    • 
   
  • 5
    • 
   
  • 6
    • 
   
  • 7
    • 
   
  • 8
    • 
   
  • 9
    • 
   
  • 10
    • 
   
  • 11
    • 
   
  • 12
    • 
   
  • 13
    • 
   
  • 14
    • 
   
  • 15
    • 
   
  • 16
    • 
   
  • 17
    • 
   
  • 18
    • 
   
  • 19
    • 
   
  • 20
    • 
   
  • 21
    • 
   
  • 22
    • 
   
  • 23
    • 
   
  • 24
    • 
   
  • 25
    • 
   
  • 26
    • 
   
  • 27
    • 
   
  • 28
    • 
   
  • 29
    • 
   
  • 30
    • 
   
  • 31
    • 
   
  • 32
    • 
   
  • 33
    • 
   
  • 34
    • 
   
  • 35
    • 
   
  • 36
    • 
   
  • 37
    • 
   
  • 38
    • 
   
  • 39
    • 
   
  • 40
    • 
   
  • 41
    • 
   
  • 42
    • 
   
  • 43
    • 
   
  • 44
    • 
   
  • 45
    • 
   
  • 46
    • 
   
  • 47
    • 
   
  • 48
    • 
   
  • 49
    • 
   
  • 50
    • 
   
  • 51
    • 
   
  • 52
    • 
   
  • 53
    • 
   
  • 54
    • 
   
  • 55
    • 
   
  • 56
    • 
   
  • 57
    • 
   
  • 58
    • 
   
  • 59
    • 
   
  • 60
    • 
   
  • 61
    • 
   
  • 62
    • 
   
  • 63
    • 
   
  • 64
    • 
   
  • 65
    • 
  
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-7f770a53f2.css" rel="stylesheet">
            </div>
								
				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>

相關推薦

JavaScript使用正則表示式實現迷糊查詢

使用者在輸入框中輸入文字時,使用正則在資料區進行檢索,顯示出提示資訊. <head> <meta charset="UTF-8"> <title>模糊查詢</title> <style type="text/css

JavaScript 正則表示式與字串查詢

首先提出一個問題： 如何取得一個給定的字串substr在另一個字串str中出現的次數？ 字串匹配，第一想到的就是正則表示式，但我們最常使用的字面量來建立的正則表示式方式卻無法傳入變數， 這時應該使用另一種建立正則表示式的方式：建構函式，如下 var reg = new R

JavaScript的正則表示式實現郵箱校驗

說到html5，在說郵箱校驗，聰明的人已經想到了直接寫個 電子郵箱：<input type="email" name="email">這樣不就是自動校驗郵箱了麼。。。。     不錯，這樣也可以，但是我要說的是：在沒有出來這個的時候我們是這樣驗證的，請看程式碼&

javascript中利用正則表示式實現表單驗證

    <html xmlns="http://www.w3.org/1999/xhtml">     <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    

【JavaScript小專案】正則表示式實現使用者註冊輸入資訊驗證（包含彈窗和innerHTML驗證）

本博主要是運用正則表示式，登陸介面進行出生日期選擇，用到年月日的三級聯動，第一種驗證方式用到的innerHTML的的動態驗證輸入資訊，第二種驗證方式利用陣列彈窗驗證。效果：圖1.1圖1.2圖1.3圖1.4程式碼：登入頁面的login.html的，主要是年月日三級聯動 <

JavaScript 正則表示式驗證登入例項

程式碼片段： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>qq登入模擬測試</title> </head> <

JavaScript 正則表示式使用例項集合

1、字元 ^ 的使用  程式碼片段 <html> <head> <title>字元^的使用</title> <meta http-equiv="Content-Type" conten

JavaScript正則表示式表單驗證例項

/*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組成 */ function

JavaScript正則表示式與表單驗證

一.非空驗證 判斷非空 最好還是不要使用trim()方法 有的瀏覽器可能不支援 推薦使用正則表示式 判斷是否為空 // " abc "----->"abc "------>"abc"function trim (txt) { var afterText = txt.replace(/^\s*

Java正則表示式實現港、澳、臺身份證驗證

最近由於業務的要求，需要進行港、澳、臺人員身份證驗證，現在直接上程式碼，經供參考學習，也為自己積累一些工具類： package com.qiu.validate; public class regexValidateCard { public String validateIdCard10(String id

詳解JavaScript正則表示式（三）

本文是JavaScript正則表示式的第三篇文章，若是對正則表示式陌生的話，可以看我之前的兩篇文章。 詳解正則表示式（一） 詳解正則表示式（二） 貪婪模式和非貪婪模式 1、貪婪模式 在匹配成功的情況下，儘可能多的匹配。而JavaScript預設的就是貪婪模式。話不多說，直

詳解JavaScript正則表示式（一）

RegExp 物件表示正則表示式，它是對字串執行模式匹配的強大工具 這篇文章主要是對正則表示式有一個全面的瞭解，學完之後，當再次看到一些比較複雜的正則表示式的時候就可以逐步分析了。當然，再加上一段時間的練習，相信你自己也可以學會怎麼使用正則表示式的。 1、例項化正則表示式的兩種方

手把手教你搞懂JavaScript正則表示式之方法

咱們來看看JavaScript中都有哪些操作正則的方法。 RegExp RegExp 是正則表示式的建構函式。 使用建構函式建立正則表示式有多種寫法： new RegExp('abc'); // /abc/ new RegExp('abc', 'gi'); // /abc/gi

Java簡單正則表示式實現

前言：由於工作中涉及對正則的使用，所以簡單的整理一下Java中正則的使用，做一個自我檢討和筆記整理。 Java中校驗某個字串是否滿足某個規則，可以簡單到直接使用String類的matches方法。 例如： // 校驗手機號碼有效性 String regex = "^1[

JavaScript正則表示式之語法--詼諧易懂

正則表示式可以用來做表單校驗，也可以用來搜尋關鍵字，匹配字元等等，功能非常強大，但是剛開始看到正則的語法就頭大，什麼程式碼，明明亂碼好嘛？！ 但是這麼好用的東西怎麼能不學習，偶然看到師父轉發的文章，簡直讓我這初學者醍醐灌頂，作者講的很通俗易懂。 在文章開始前，要了解es6字串操作方法

詳解正則表示式實現二代身份證號碼驗證

最近專案需要對身份證進行比較合理的篩選,並不想用到第三方介面,所以寫了個方法: 包括支援身份證號合法性驗證, 支援18位身份證號,支援地址編碼、出生日期、校驗位驗證. 基本上這樣就可以了. IdCodeValid:function(code){ //身份證號合法性驗證 //支援15位和18位

使用正則表示式實現網頁爬蟲。

網頁爬蟲：就是一個程式用於在網際網路中獲取指定規則的資料。 思路： 1.為模擬網頁爬蟲，我們可以現在我們的tomcat伺服器端部署一個1.html網頁。（部署的步驟：在tomcat目錄的webapps目錄的ROOTS目錄下新建一個1.html。使用notepad++進行編輯，編輯內容為：

Javascript正則表示式筆錄【2】

文章目錄 方形括號的用法 示例-禁止在表單中輸入非字母 預定義類 邊界符匹配示例 量詞 量詞 * 示例 量詞 + 示例

Javascript正則表示式筆錄【1】

關於 量詞/元字元等用法見 Javascript正則表示式筆錄【2】 文章目錄 新建正則表示式的方法 全域性匹配時需要引入額外選項 'g' 匹配多行時需要引入選項'm'，同時還要引入'g' 使用正則表示式查詢字串中

用正則表示式實現 計算器

#!/usr/bin/env python # coding:utf-8 import re def dealwith(express): express.replace('+-','-') express.replace('--','+') return express d