jQuery 요소 내에서 특정 텍스트를 안정적으로 찾고 굵게 표시하려면 어떻게 해야 합니까?

jQuery로 텍스트 요소 수정: 찾기 및 강화

jQuery에서는 DOM 요소를 동적으로 조작하는 것이 일반적입니다. 그러한 작업 중 하나는 주어진 요소 내에서 특정 텍스트를 찾아 굵게 표시하는 등 모양을 수정하는 것입니다.

다음 코드를 고려하세요.

$(window).load(function() {
  // ADD BOLD ELEMENTS
  $('#about_theresidency:contains("cross genre")').css({'font-weight':'bold'});
});

이 예에서 우리는 ID가 "about_theresidency"인 요소 내에서 "교차 장르" 텍스트를 찾아 CSS를 적용하여 굵게 만듭니다. 그러나 이 방법은 원하는 결과를 얻지 못할 수도 있습니다. 이유를 이해하기 위해 대체 솔루션을 살펴보겠습니다.

var html = $('p').html();
$('p').html(html.replace(/world/gi, '<strong>$&</strong>'));

이 접근 방식은 교체() 메서드를 사용하여 텍스트 "world"를 식별하고 굵은 HTML 태그로 바꿉니다. 다음과 같은 이유로 특정 텍스트를 찾고 수정하는 더 안정적인 방법입니다.

• 직접 텍스트 노드뿐만 아니라 요소의 전체 HTML 콘텐츠를 대상으로 합니다.
• 정규 표현식을 사용합니다. (/world/gi) 대소문자를 구분하지 않는 검색 및 전역 대체를 수행합니다.

이를 처리하기 위해 재사용 가능한 플러그인을 생성할 수도 있습니다. 기능:

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong'
    , words = opts.words || []
    , regex = RegExp(words.join('|'), 'gi') // Case insensitive
    , replacement = '$&'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

사용법:

$('p').wrapInTag({
  tag: 'em',
  words: ['world', 'red']
});

이 플러그인을 사용하면 HTML 태그로 특정 요소 내의 특정 단어를 쉽게 래핑할 수 있습니다.

위 내용은 jQuery 요소 내에서 특정 텍스트를 안정적으로 찾고 굵게 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!