小編給大家分享一下JavaScript正則方法replace如何實現(xiàn)搜索關(guān)鍵字高亮顯示，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、惠水網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

前言

正則表達式是字符串處理工具中強有力的工具.也有人認(rèn)為這只是一個小玩具,但不管怎么說都離不開它.

這里介紹的是JavaScript的正則表達式的replace方法 ,和實現(xiàn)搜索關(guān)鍵字高亮的功能.

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

replace介紹

w3school原文鏈接介紹

正則表達式如何使用特殊字符$來表示原來的文本,這是實現(xiàn)搜索高亮的關(guān)鍵,

var str = "asad sad 123 sd qwe21";
str.replace(/\d+/img,"數(shù)字");
//這里正確的匹配到了數(shù)字,且替換成了中文的數(shù)字
console.log(str);//"asad sad 數(shù)字 sd qwe數(shù)字"
------------------------------------------------------
//看一下如何使用$1,表示被捕獲的字符串
var str = "asad sad 123 sd qwe21";
str.replace(/\d+/img,"數(shù)字$1數(shù)字");
console.log(str);//"asad sad 數(shù)字$1數(shù)字 sd qwe數(shù)字$1數(shù)字"
//很顯然并沒有成功,$1 還是$1,那么如何正確使用呢?
------------------------------------------------------
var str = "asad sad 123 sd qwe21";
str.replace(/(\d+)/img,"數(shù)字$1數(shù)字");
//這里就正確的匹配了數(shù)字并且用$1 表示原字符串并替換
console.log(str);///"asad sad 數(shù)字123數(shù)字 sd qwe數(shù)字21數(shù)字"
/*
()在正則里面表示捕獲性元組,可以用$1 特殊字符來表示被替換的內(nèi)容,可以有多個()元組,也就是可以有多個$1,$2 */

開始小試身手

 

春江花月夜

作者：張若虛

春江潮水連海平，海上明月共潮生。 

滟滟隨波千萬里，何處春江無月明！ 

江流宛轉(zhuǎn)繞芳甸，月照花林皆似霰； 

空里流霜不覺飛，汀上白沙看不見。 

江天一色無纖塵，皎皎空中孤月輪。 

江畔何人初見月？江月何年初照人？ 

人生代代無窮已，江月年年只相似。