Как я могу обернуть span вокруг раздела html с помощью jQuery?

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> 

Моя цель состоит в том, чтобы обернуть тег [Embed] в <span class="hide"></span>, что я могу с помощью CSS таргетинга. Есть несколько экземпляров этого html с различными ссылками внутри [embed] [/ embed], поэтому мне, скорее всего, придется найти способ обернуть весь код в промежуток.

Я искал .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>