jQuery를 사용하여 html 섹션 주위에 스팬을 감쌀 수 있습니까?

Question

일부 생성 된 HTML에서 문자 섹션을 대상으로 지정하는 방법을 알아 내려고하고 있습니다.

내가 가진 출력은 다음과 같습니다

<div class="entry-content"> 
    [embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy. 
</div> 

원하는 출력은 다음과 같습니다

<div class="entry-content"> 
    <span class="hide"> 
     [embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] 
    </span> This is some other copy. 
</div> 

내 목표는 내가 CSS를 통해 대상으로 할 수있는 <span class="hide"></span>에서 [삽입] 태그를 래핑하는 것입니다. [embed] [/ embed] 안에는 다른 링크가있는이 html의 인스턴스가 여러 개 있으므로 전체 코드를 span으로 래핑하는 방법을 찾아야 할 가능성이 큽니다.

쓸모없이 .wrap()을 조사하고있었습니다. 도움이된다면 고맙습니다.

Answer 1

html() 메서드를 사용하려면 [embed]*[/embed] 패턴을 꺼내어 <span>에 래핑하는 정규식을 사용하면됩니다. 이 시도 :

$('.entry-content').html(function(i, html) { 
 
    return html.replace(/(\[embed\].+\[\/embed\])/gi, '<span class="hide">$1</span>'); 
 
});

.hide { background-color: yellow; } /* just for demo purposes */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="entry-content"> 
 
    [embed]https://www.youtube.com/watch?v=y545JdKuHOs[/embed] This is some other copy. 
 
</div> 
 
<div class="entry-content"> 
 
    [embed]https://www.youtube.com/watch?v=dK45JuOsy5H[/embed] This is some other copy. 
 
</div>