Heim >Web-Frontend >js-Tutorial >js正文内容高亮效果的实现方法_javascript技巧

js正文内容高亮效果的实现方法_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:30:501444Durchsuche
复制代码 代码如下:

//高亮显示搜索到的关键字
function HeightLight(Keyword)
{
 //文本选择器
 var TextRange;
 //是否找到
 var Found=false;
 //找到的次数
 var Count = 0;
 TextRange = document.body.createTextRange();
 Found = TextRange.findText(Keyword);
 if (Found)
 {
  Count++;
 }
 while (Found && Count > 0)
 {
  TextRange.pasteHTML('' + Keyword + '');
  //将滚动条定位到第一次查到的视口范围内
  if(Count==1)
  {
   TextRange.scrollIntoView();
  }
  //继续查找
  Found = TextRange.findText(Keyword);
  if (!Found)
  {
   Count = 0;
  }
  else
  {
   Count++;
  }
 }
}
//正则式法
function highLight(ele,keys)
{
 var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g");
 ele.innerHTML = ele.innerHTML.replace(reg,"$1");
}
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn