JavaScript正則方法replace實現搜尋關鍵字高亮

阿新 • • 發佈：2018-12-31

前言

正則表示式是字串處理工具中強有力的工具.也有人認為這只是一個小玩具,但不管怎麼說都離不開它.
這裡介紹的是JavaScript的正則表示式的replace方法 ,和實現搜尋關鍵字高亮的功能.

先介紹一下正則表示式的replace方法
replace介紹

正則表示式如何使用特殊字元$來表示原來的文字,這是實現搜尋高亮的關鍵,

var str = "asad sad 123 sd qwe21";
str.replace(/\d+/img,"數字");
//這裡正確的匹配到了數字,且替換成了中文的數字
console.log(str);//"asad sad 數字 sd qwe數字"

------------------------------------------------------
//看一下如何使用$1,表示被捕獲的字串 

var str = "asad sad 123 sd qwe21";

str.replace(/\d+/img,"數字$1數字");
console.log(str);//"asad sad 數字$1數字 sd qwe數字$1數字"
//很顯然並沒有成功,$1 還是$1,那麼如何正確使用呢?

------------------------------------------------------
var str = "asad sad 123 sd qwe21";

str.replace(/(\d+)/img,"數字$1數字");
//這裡就正確的匹配了數字並且用$1 表示原字串並替換
console.log 
(str);///"asad sad 數字123數字 sd qwe數字21數字"
/*
()在正則裡面表示捕獲性元組,可以用$1 特殊字元來表示被替換的內容,可以有多個()元組,也就是可以有多個$1,$2 */

開始小試身手

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
 <style>
 b{
 color:red;
 }
 </style>
<div id="poetry">
春江花月夜<br>
作者：張若虛<br> 

春江潮水連海平，海上明月共潮生。 <br>
灩灩隨波千萬裡，何處春江無月明！ <br>
江流宛轉繞芳甸，月照花林皆似霰； <br>
空裡流霜不覺飛，汀上白沙看不見。 <br>
江天一色無纖塵，皎皎空中孤月輪。 <br>
江畔何人初見月？江月何年初照人？ <br>
人生代代無窮已，江月年年只相似。 <br>
</div>
<input type ="text" id="input" />
</body>
</html>
<script>
//input 輸入要查詢的字串
input.onchange = function(){
    //獲取要查詢的字串
    var searchVal = input.value;
    // 獲取要查詢的內容
    var text = poetry.innerHTML;
    //將之前的查詢高亮的字串,取消高亮
    text = text.replace(/<b[^>]*>([^>]*)<\/b[^>]*>/ig,"$1");
    poetry.innerHTML = text;
    //初始化正則表示式,加上括號(),形成可捕獲元組.ig表示全域性匹配和不區分大小寫
    var reg = new RegExp("("+searchVal +")","ig");
    //高亮要查詢的字串
    text = text.replace(reg,"<b>$1</b>");
    poetry.innerHTML = text;
}

</script>

完整程式碼如上,小夥伴們可以自己複製過去直接執行,有不懂的小夥伴可以留言.
自然如有疏漏之處歡迎大家修改指正

JavaScript正則方法replace實現搜尋關鍵字高亮

前言正則表示式是字串處理工具中強有力的工具.也有人認為這只是一個小玩具,但不管怎麼說都離不開它. 這裡介紹的是JavaScript的正則表示式的replace方法 ,和實現搜尋關鍵字高亮的功能. 先介紹一下正則表示式的replace方法正則表

搜尋關鍵字高亮顯示方法

{ //sqlstr 待查詢的關鍵字 //str 已經查詢到帶有關鍵字的字串 int len=sqlkey.Length; int len1=str.Length;

ElasticSearch的搜尋關鍵字高亮

一：需求：搜尋一本書的題目,搜尋關鍵字高亮加粗顯示,(根據title中的文字進行全文搜尋，展示出結果來,統計搜尋時間了,返回記錄數). 1. 使用技術如下 &n

jQuery實現搜尋內容高亮顯示

<html> <head> <meta charset="UTF-8"> <title>jQuery搜尋高亮顯示</title>

elasticsearch5.5.2用javaAPI實現搜尋結果高亮顯示和搜尋建議

前言：像百度、360搜尋等等，我們輸入完搜尋條件時，他會自動出來一個提示框，將我們輸入的關鍵詞進行自動補全，即搜尋推薦。當我們點選搜尋後，返回的搜尋結果中會將我們搜尋的內容進行高亮的顯示（不同顏色標記出來），強大的elasticsearch就提供了這些功能。在這裡我會使用ja

js程式碼實現查詢關鍵字高亮顯示

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>程式碼實現查詢關鍵字高亮顯示</title> <style type="

WPF搜尋關鍵字高亮顯示

目標：在WPF中，對lucene.net進行全文檢索後的結果中包含的關鍵字進行高亮顯示。檢索結果中的關鍵字高亮顯示，在網頁中顯示是很簡單的，lucene中加標籤樣式就可以了，可是在WPF中就不行了。我在WPF中用GridControl顯示搜尋結果列表，GridContr

搜尋關鍵字高亮（不區分大小寫）

inputHandle () { if (this.keyword.length > 0) { axios('/api/article/getArticleByKeyword?keyword=' + this.keyword).then((

js實現搜尋字高亮

JavaScript 正則表示式RegExp（text方法/內部類/邊界/量詞/優先順序/replace/trim）

1. 概述英語：Regular Expression 本質：用來記錄文字規則的程式碼（為字串定義規則，為輸入內容定義規則！）應用非常廣泛，如：表單驗證、高階搜尋、生化科學（有一定難度，不要求非常熟練，但至少會表單驗證）

JavaScript 正則表達式 string.replace( regex, "$1" );中“$1”的含義及郵箱正則表達式

name itl false type 根據 fun var ext body 在使用javascrip正則表達式時，發現可以根據正則表達式取字符串內的特定字符串的內容。舉例說明： <!DOCTYPE html> <html> <hea

js中string之正則表示式replace方法詳解

本篇文章主要介紹了js中string之正則表示式replace方法詳解，replace方法是javascript涉及到正則表示式中較為複雜的一個方法，嚴格上說應該是string物件的方法。 replace方法是javascript涉及到正則表示式中較為複雜的一個方法，嚴格上說應該是string物

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

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

JavaScript正則表示式-常用方法

公司之前有個胖女孩說你竟然會正則? 其實正則沒那麼難；今天我們說說他常用的幾個API。在講方法之前, 我們先對正則表示式做一個基本的瞭解： 1、正則表示式定義使用單個字串來描述、匹配一系列符合某個句法規則的字串搜尋模式。 2、英語：Regular Expression，在程式碼中常簡寫為regex、R

javascript 正則表示式過濾sql關鍵字

js 正則替換 replace()方法

replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字串(string)，reExp可以是正則表示式物件(RegExp)也可以是字串(string)，replaceText是替代查詢到的字串。。為了

javascript正則表示式(6)——字串物件方法

String.protatype.search(reg) 1.search()方法用於檢索字串中指定的子字串，或檢索與正則表示式相匹配的子字串 2.方法返回第一個匹配結果index,查詢不到返回-1 3.search()方法不執行全域性匹配，它將忽略標誌g，並且總是從字串的

JavaScript正則表示式（三）字串例項方法search

還可以使用字串例項本身的方法來確定制定的正則表示式物件是否在字串中有匹配的詞。請看如下程式碼： function doSearch(){ //定義一個字串 var str = "I have never

javascript 正則匹配提取全部 preg_match_all matchAll方法

javascript 提取所有的的方法，javascript中沒有matchAll這個方法。用while來實現類似 PHP 中的preg_match_all() ：（by default7#zbph

javascript正則表示式RegExp再次研究-replace

原文連結昨天說了幾個RegExp的幾個例項屬性 global 標示正則表示式是否指定了全域性模式g（只讀） ignoreCase 標示正則表示式是否指定了不區分大小寫模式i（只讀） mutiline 標示正則表示式是否指定了多行模式m（只讀） lastInde

JavaScript正則方法replace實現搜尋關鍵字高亮

前言

相關推薦