讓文字高亮的JavaScript程式碼

這次帶給大家讓文字高亮的JavaScript程式碼，用JavaScript讓文字高亮的的注意事項有哪些，下面就是實戰案例，一起來看一下。

有很多JQuery的第三方函式庫可以實現高亮文字的功能，但我更喜歡用下面這一小段JavaScript程式碼來實作這個功能，它非常短小，而且可以根據我的需要去進行靈活的修改，而且可以自己定義高亮的樣式。下面這兩個函數可以幫助你創建自己的文字高亮插件。

function highlight(text, words, tag) { 
  // Default tag if no tag is provided
  tag = tag || 'span'; 
  var i, len = words.length, re;  for (i = 0; i < len; i++) {    // Global regex to highlight all matches
    re = new RegExp(words[i], &#39;g&#39;);    if (re.test(text)) {
      text = text.replace(re, &#39;<&#39;+ tag +&#39; class="highlight">$&</&#39;+ tag +&#39;>&#39;);
    }
  } 
  return text;
}

你同樣會需要取消高亮的函數：

function unhighlight(text, tag) {  // Default tag if no tag is provided
  tag = tag || &#39;span&#39;;  var re = new RegExp(&#39;(<&#39;+ tag +&#39;.+?>|<\/&#39;+ tag +&#39;>)&#39;, &#39;g&#39;);  return text.replace(re, &#39;&#39;);
}

使用方法：

$('p').html( highlight(
    $('p').html(), // the text
    ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight
    'strong' // custom tag));

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

判斷日期是否有效的JavaScript程式碼片段

Node.js的Event Loop詳解

JavaScript運行機制之任務佇列

#怎麼阻止django中form頁面刷新後自動提交

以上是讓文字高亮的JavaScript程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！