jQuery를 사용하여 단락 내의 특정 텍스트를 어떻게 굵게 표시할 수 있나요?

jQuery로 텍스트 조작: 특정 문자열 강조

jQuery에서 사용자는 문서 내에서 특정 텍스트를 찾아 수정해야 하는 경우가 많습니다. 모습. 일반적인 시나리오 중 하나는 특정 텍스트를 굵게 표시하여 강조를 추가하는 것입니다.

ID가 "about_theresidency"인 단락 내에서 특정 문구를 강조하려고 시도하는 다음 jQuery 코드를 고려해 보세요.

` `
$(window).load(function() {
$('#about_theresidency:contains("cross Genre")').css({'font-weight':'bold'});
});
``

이 코드는 ID가 "about_theresidency"인 요소를 찾는 것을 목표로 합니다. "교차 장르" 텍스트를 포함하고 CSS 속성 "font-weight"를 적용하여 해당 특정 텍스트를 굵게 표시합니다. 하지만 이 코드는 "about_theresidency"에 있는 텍스트의 동적 특성으로 인해 의도한 대로 작동하지 않을 수 있습니다.

이 문제를 해결하려면 다음 방법을 사용하는 것이 좋습니다.

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

여기서, 교체() 메서드를 활용하여 단락에서 "world"라는 텍스트가 나타나는 모든 항목을 찾아 이를 강력한 태그로 둘러싸인 동일한 텍스트로 바꿉니다. 이렇게 하면 jQuery의 :contains 선택기에 의존하지 않고 원하는 텍스트를 효과적으로 굵게 표시할 수 있습니다.

또는 유연성을 높이기 위해 사용자 정의 jQuery 플러그인을 활용할 수도 있습니다.

$.fn.wrapInTag = function(opts) {

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

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

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

이 플러그인을 사용하면 지정된 텍스트를 래핑할 수 있습니다. 원하는 HTML 태그에 텍스트를 삽입하여 텍스트 조작 프로세스를 더욱 효과적으로 제어할 수 있습니다.

위 내용은 jQuery를 사용하여 단락 내의 특정 텍스트를 어떻게 굵게 표시할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!