js實現搜尋字高亮
//<![CDATA[
//--------begin function fHl(o, flag, rndColor, url)------------------//
function fHl(o, flag, rndColor, url){
/// <summary>
/// 使用 javascript HTML DOM 高亮顯示頁面特定字詞.
/// 例項:
/// fHl(document.body, '紙傘|她');
/// 這裡的body是指高亮body裡面的內容。
/// fHl(document.body, '希望|愁怨', false, '/');
/// fHl(document.getElementById('at_main'), '獨自|飄過|悠長', true, 'search.asp?keyword=');
/// 這裡的'at_main'是指高亮id='at_main'的div裡面的內容。search.asp?keyword=指給關鍵字加的連結地址,
/// 我這裡加了一個引數,在後面要用到。可以是任意的地址。
/// </summary>
/// <param name="o" type="Object">
/// 物件, 要進行高亮顯示的物件.
/// </param>
/// <param name="flag" type="String">
/// 字串, 要進行高亮的詞或多個詞, 使用 豎槓(|) 分隔多個詞 .
/// </param>
/// <param name="rndColor" type="Boolean">
/// 布林值, 是否隨機顯示文字背景色與文字顏色, true 表示隨機顯示.
/// </param>
/// <param name="url" type="String">
/// URI, 是否對高亮的詞新增連結.
/// </param>
/// <return></return>
var bgCor=fgCor='';
if(rndColor){
bgCor=fRndCor(10, 20);
fgCor=fRndCor(230, 255);
} else {
bgCor='#F0F';
fgCor='black';
}
var re=new RegExp(flag, 'i');
for(var i=0; i<o.childNodes.length; i++){
var o_=o.childNodes[i];
var o_p=o_.parentNode;
if(o_.nodeType==1) {
fHl(o_, flag, rndColor, url);
} else if (o_.nodeType==3) {
if(!(o_p.nodeName=='A')){
if(o_.data.search(re)==-1)continue;
var temp=fEleA(o_.data, flag);
o_p.replaceChild(temp, o_);
}
}
}
//------------------------------------------------
function fEleA(text, flag){
var style=' style="background-color:'+bgCor+';color:'+fgCor+';" '
var o=document.createElement('span');
var str='';
var re=new RegExp('('+flag+')', 'gi');
if(url){
str=text.replace(re, '<a href="'+url+
'$1"'+style+'>$1</a>'); //這裡是給關鍵字加連結,紅色的$1是指上面連結地址後的具體引數。
} else {
str=text.replace(re, '<span '+style+'>$1</span>'); //不加連結時顯示
}
o.innerHTML=str;
return o;
}
//------------------------------------------------
function fRndCor(under, over){
if(arguments.length==1){
var over=under;
under=0;
}else if(arguments.length==0){
var under=0;
var over=255;
}
var r=fRandomBy(under, over).toString(16);
r=padNum(r, r, 2);
var g=fRandomBy(under, over).toString(16);
g=padNum(g, g, 2);
var b=fRandomBy(under, over).toString(16);
b=padNum(b, b, 2);
//defaultStatus=r+' '+g+' '+b
return '#'+r+g+b;
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function padNum(str, num, len){
var temp=''
for(var i=0; i<len;temp+=num, i++);
return temp=(temp+=str).substr(temp.length-len);
}
}
}
//--------end function fHl(o, flag, rndColor, url)--------------------//
//]]>
</script>
最後呼叫方法:
<script type="text/javascript"> fHl(document.body, '高亮'); //對頁面body的區域中的“高亮”文字背景著色 </script>
相關推薦
js實現搜尋字高亮
<script type="text/javascript">//<![CDATA[ //--------begin function fHl(o, flag, rndColor, url)------------------// funct
jQuery實現搜尋內容高亮顯示
<html> <head> <meta charset="UTF-8"> <title>jQuery搜尋高亮顯示</title>
elasticsearch5.5.2用javaAPI實現搜尋結果高亮顯示和搜尋建議
前言:像百度、360搜尋等等,我們輸入完搜尋條件時,他會自動出來一個提示框,將我們輸入的關鍵詞進行自動補全,即搜尋推薦。當我們點選搜尋後,返回的搜尋結果中會將我們搜尋的內容進行高亮的顯示(不同顏色標記出來),強大的elasticsearch就提供了這些功能。在這裡我會使用ja
JavaScript正則方法replace實現搜尋關鍵字高亮
前言 正則表示式是字串處理工具中強有力的工具.也有人認為這只是一個小玩具,但不管怎麼說都離不開它. 這裡介紹的是JavaScript的正則表示式的replace方法 ,和實現搜尋關鍵字高亮的功能. 先介紹一下正則表示式的replace方法 正則表
JS實現查詢關鍵詞高亮效果
var newHtml = html.replace(regExp, "<span class='highlight'>" + searchText + '</span>'); //將找到的關鍵字替換,加上highlight屬性;
使用textSearch.js實現關鍵詞搜尋,並搜尋結果高亮顯示
引用塊內容 今天我們介紹的這個外掛來著http://www.zhangxinxu.com/wordpress/,張鑫旭的文章寫得挺好的,大家有興趣的多看看。 我們今天的這個外掛叫“jq
兩種簡單實現菜單高亮顯示的JS類(轉載)
on() pos 菜單高亮 href 不同的 index body -m ear 兩種簡單實現菜單高亮顯示的JS類 近期在寫一個博客管理後臺的前端,涉及在同一頁面兩種高亮顯示當前菜單的需求.記得當年寫靜態頁時,為了實現高亮都是在每個頁面加不同的樣式,呵.高亮
js程式碼實現查詢關鍵字高亮顯示
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>程式碼實現查詢關鍵字高亮顯示</title> <style type="
springDataSolr搜尋關鍵詞高亮的實現
@Service(timeout=5000) public class ItemSearchServiceImpl implements ItemSearchService{ @Autowired private SolrT
zTree實現模糊搜尋並高亮顯示
zTree是一個常用的樹外掛,本身對搜尋功能封裝的不是太完美,為了實現下列效果我對其進行了二次封裝。 首先,在定義tree時我們將它高亮和普通顯示的樣式定義好。 var setting = { view:
Ghost本地安裝highlight.js使代碼高亮
寫博客 路徑 繼續 net this 點擊 pri handlebar length 對於程序猿寫博客來說,這代碼高亮是起碼的要求。可是Ghost本身沒有支持高亮代碼。可是能夠通過擴展來實現,它就是highlight.js——附官方站點,看了下首頁介紹,
JTree 如何實現高亮節點,如何實現排選,如何實現滑鼠移動高亮?
先上圖,看看是不是你們想要的類似效果: 滑鼠移動到樹節點所在行的任意位置,實現高亮。 滑鼠點選到樹節點所在行的任意位置,實現高亮並選中該節點。 網上找了好久都沒找到這樣的實現方法,可能是swing 現在用的人太少了。 在這裡希望能為想要用swing JTree的朋友提供一點參考
ElasticSearch的搜尋關鍵字高亮
一:需求:搜尋一本書的題目,搜尋關鍵字高亮加粗顯示,(根據title中的文字進行全文搜尋,展示出結果來,統計搜尋時間了,返回記錄數). 1. 使用技術如下 &n
搜尋關鍵字高亮顯示方法
{ //sqlstr 待查詢的關鍵字 //str 已經查詢到帶有關鍵字的字串 int len=sqlkey.Length; int len1=str.Length;
selector實現按鈕選中高亮效果原理
按鈕選中高亮常規程式碼如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
如何實現Linux下高亮關鍵字的tail -f功能
公司內部一哥們釋出到郵件列表中的一個小tip,挺有意思,屬於程式設計師的“奇淫技巧”類吧,值得記錄一下。 如果你在linux下工作,那用tail -f跟蹤一個日誌檔案的輸出內容應該是家常便飯了。 但是,有時你更關心的是一些敏感字詞,希望能夠在動態跟蹤的同
VUE:vue 搜尋結果高亮顯示關鍵字(父+子)
1. 需要解決的問題 父元件將搜尋的欄位傳到子元件 子元件接受資料,正則匹配,並替換欄位 2. 具體程式碼 父元件程式碼 <template> <div> <div v-if="showMe"> <
JS 選單內容關聯高亮滾動監聽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s
WPF搜尋關鍵字高亮顯示
目標:在WPF中,對lucene.net進行全文檢索後的結果中包含的關鍵字進行高亮顯示。 檢索結果中的關鍵字高亮顯示,在網頁中顯示是很簡單的,lucene中加標籤樣式就可以了,可是在WPF中就不行了。 我在WPF中用GridControl顯示搜尋結果列表,GridContr
搜尋關鍵字高亮(不區分大小寫)
inputHandle () { if (this.keyword.length > 0) { axios('/api/article/getArticleByKeyword?keyword=' + this.keyword).then((