>웹 프론트엔드 >JS 튜토리얼 >정규식을 기반으로 UL에서 LI의 스타일 교체 기능 구현

정규식을 기반으로 UL에서 LI의 스타일 교체 기능 구현

巴扎黑
巴扎黑원래의
2017-06-16 10:30:201704검색

이 글에서는 정규식 기반 UL에서 LI의 스타일 대체 기능을 주로 소개하고, 페이지 요소 속성을 동적으로 조작하기 위해 정규식을 사용하는 JavaScript의 관련 구현 기술이 포함되어 있습니다.

이 글의 예는 다음과 같습니다. 정규식을 기반으로 한 LI 구현 정규식은 UL에서 LI의 스타일 대체 기능을 구현합니다. 참고용으로 공유합니다. 세부 사항은 다음과 같습니다.

처음에는 UL로 작성하려고 생각했지만 결과가 만족스럽지 않았고 스타일도 크게 변하지 않은 것으로 나타났습니다.

$("#UlContent li").each(function (index) {
  // alert(index + ': ' + $(this).text());
  var text = $(this).text();
  var regExp = new RegExp($("#search_content").val(), 'g');
  var newText = text.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//将找到的关键字替换,加上highlight属性;
  $(this).text(newText);//更新文章;
});

실제로 UL을 작성하기 전에 교체해야 합니다.

$("#search_content").keyup(function () {
  if(CheckChinese($("#search_content").val()))
  {
   $.ajax({
    type: "POST",
    anync: true,
    url: "HelpCenterSuggestion.ashx",
    cache: false,
    dataType: "text",
    data: { m: $("#search_content").val() },
    success: function (result) {
     $("#UlContent li").remove();
      var regExp = new RegExp($("#search_content").val(), &#39;g&#39;);
      var newText = result.replace(regExp,"<span style=\"background-color:red;\">" + $("#search_content").val() + "</span>");//将找到的关键字替换,加上highlight属性;
      $("#UlContent").append(newText);
    }
   });

위 내용은 정규식을 기반으로 UL에서 LI의 스타일 교체 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.