> 웹 프론트엔드 > JS 튜토리얼 > 텍스트를 강조하는 JavaScript 코드

텍스트를 강조하는 JavaScript 코드

php中世界最好的语言
풀어 주다: 2018-03-16 16:17:07
원래의
2320명이 탐색했습니다.

이번에는 텍스트를 강조하는 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;);
}
로그인 후 복사

사용법:

$(&#39;p&#39;).html( highlight(
    $(&#39;p&#39;).html(), // the text
    [&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;, &#39;hello world&#39;], // list of words or phrases to highlight
    &#39;strong&#39; // custom tag));
로그인 후 복사

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 주목하세요 기타관련 기사! RECEMEDRENDED 읽기 :

자바 스크립트 코드 스 니펫 날짜가 유효한지 여부를 결정하기위한 javaScript 실행 메커니즘의 이벤트 루프에 대한 설명이 유효합니다. django의 양식 페이지를 새로 고친 후 자동으로 제출하는 것을 방지하세요

위 내용은 텍스트를 강조하는 JavaScript 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿