6miu盘搜

搜索关键字高亮，正则实现 || Jquery实现

it2026-03-19 3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>t2</title> <script src="vue.js"></script> </head> <body> <div class="d"> <h3 v-html="filterA(text)"></h3> </div> <script> new Vue({ el: '.d', data(){ return { text: 'huxianghuxianghuxianghuxiangHUxiang', search: 'hu' } }, methods: { filterA(t){ let r = t.replace(eval(`/(${this.search})/g`), `<span style="color:#f4aa2f">${this.search}</span>`); return r; } } }) </script> </body> </html>

Jquery实现

(function($) { $.fn.GL = function(options) { var dataop = { ocolor: 'red', oshuru: '��', }; var chuancan = $.extend(dataop, options); $(this).each(function() { var _this = $(this); _this.find($(".glnow")).each(function() { $(this).css({ color: "" }); }); }); if (chuancan.oshuru == '') { return false; } else { $(this).each(function() { var _this1 = $(this); var html = _this1.html(); var newHtml = html.replace(chuancan.oshuru, '<span class="glnow" style="color:' + chuancan.ocolor + '">' + chuancan.oshuru +'</span>'); _this1.html(newHtml); }); } } })(jQuery); /*再到调用页面初始化*/ $('.high-light').GL({ ocolor: '#f4aa2f', oshuru: this.search });

最新回复(0)