regex + str_replace를 사용하여 jQuery 태그를 작성하십시오.

Question

저는 데이터베이스에 저장된 기사를 조작하기 위해 jQuery를 사용하고 있습니다.

각 기사는 섹션으로 구분됩니다. 일반적인 섹션의 HTML은 다음과 같습니다.

<section id="directions" data-toggle="collapse" data-target="#directions2" class="SecCon"> 
    <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Directions</span>  </h2> 
    <div id="directions2" class="collapse in article"> 
    <p>Animals have the power of locomotion.</p> 
    </div> 
<section> 

잘 작동합니다. 일부 jQuery 스크립트와 결합되어 각 섹션을 열거 나 닫고 텍스트를 표시하거나 숨길 수있는 버튼 형태로 각 표제를 표시합니다.

나를 괴롭히는 유일한 문제는 코드 팽창입니다. 온라인으로 갈 수있는 기사가 수백 가지가 있으며 그 코드, 글리 phicon 등을 모두 추가하면 고통 스러울 것입니다.

내가 첫 번째 단락 태그 전에이에 대한 모든 것을 응축 경우

그래서 상상 :

내 데이터베이스에 저장 될 수 있지만, 디스플레이가없는 str_replace와 정규 표현식으로 변경 될 수

<section> 
    <h2>Directions</h2> 
    <div> 

가 빈칸을 채울를 위에 게시 한 코드 블록으로 변환합니다. 그리고 '길 찾기'가 '생태학'으로 대체되면 '방향'의 모든 사례가 '생태학'으로 대체된다는 점을 제외하고는 스타일이 동일하게 적용됩니다.

추가 장점은 모든 데이터베이스 테이블을 변경하지 않고도 코드를 크게 변경할 수 있다는 것입니다.

내가이 프로젝트에 뛰어 들기 전에, 나는 누군가가 나에게 이것이 실행 가능한 계획인지 또는 바보 같은 생각인지를 말해 줄 수 있는지 궁금해했다. 그것을하는 더 좋은 방법이 있습니까?

Answer 1

추가 마크 업없이 HTML을 저장하고 저장하십시오.

<section> 
    <h2>Directions</h2> 
    <div>Some directions</div> 
</section> 
<section> 
    <h2>Ecology</h2> 
    <div>Ecology info</div> 
</section> 

javascript/jQuery를 사용하여 ID, 범위 및 클래스를 아무런 문제없이 추가 할 수 있습니다. 이 같은 (demo) 시도 :

$(function() { 
    $('section').each(function() { 
     var html, 
      $this = $(this), 
      $h2 = $this.children('h2'), 
      sectionId = $h2.text().toLowerCase(); 
     $this.attr({ 
      class : 'SecCon', 
      id : sectionId, 
      'data-toggle' : 'collapse', 
      'data-target' : '#' + sectionId + '2' 
     }); 
     $h2.wrapInner('<span class="label label-primary"/>'); 

     html = '<small>' + 
      '<span class="only-collapsed glyphicon glyphicon-chevron-down"></span>' + 
      '<span class="only-expanded glyphicon glyphicon-remove-sign"></span>' + 
      '</small>'; 
     $h2.find('.label').prepend(html); 

     $this.children('div').attr({ 
      class : 'collapse in article', 
      id : sectionId + '2' 
     }); 
    }); 
});