There is a block with text and tags. And there are two span labels with id. They can be as in the general tag "p" or in various tags as indicated below.

<div class="wrapper"> <div class="text"> <p>Тест <span id="mr-1"></span> loremipsum</p> <p>парам парам парам пам пам <span id="mr-2"></span></p> </div> </div>

Tell me pliz how to wrap, based on these tags, the text that is between them, in the tag "i":

 <div class="wrapper"> <div class="text"> <p>Тест <i><span id="mr-1"></span>loremipsum</i></p> // or <p>Тест <span id="mr-1"></span><i>loremipsum</i></p> <p><i>парам парам парам пам пам <span id="mr-2"></span></i></p> </div> </div>

And if the common parent:

 <div class="wrapper"> <div class="text"> <p>Тест <i><span id="mr-1"></span> loremipsum <span id="mr-2"></span></i></p> // or <p>Тест <span id="mr-1"></span> <i>loremipsum</i> <span id="mr-2"></span></p> <p>парам парам парам пам пам</p> </div> </div>

    2 answers 2

    So?

     $(_ => { let isWrap = false; $('.wrapper').find(":not(iframe)").addBack().contents().each((i, e) => { let $e = $(e); isWrap ? $e.wrap('<i></i>') : null; if(e.nodeType === 1){ if($e.attr('id') === 'mr-1') isWrap = true; if($e.attr('id') === 'mr-2') isWrap = false; } }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="text"> <p>Тест <span id="mr-1"></span> loremipsum</p> <p>парам парам парам пам пам <span id="mr-2"></span> text</p> </div> </div>

    • Yes. Thanks you. - Mr.Andrew

     wrapWith('.wrapper', '<i class="test">', '</i>'); function wrapWith(parentsSelector, opnTag, clsTag) { const RE = /(id="mr-1">\s*<\/span>)([\s\S]+?)(<span id="mr-2")/gmi; let parentEls = document.querySelectorAll(parentsSelector); for (let el of parentEls) el.innerHTML = el.innerHTML.replace(RE, `\$1${opnTag}\$2${clsTag}\$3`); } 
     .wrapper { margin-bottom: 1.5em; } .wrapper p { margin: 0.15em 0; } i.test { color: #080; } 
     <div class="wrapper"> <div class="text"> <p>Тест <span id="mr-1"></span> lorem ipsum</p> <p>парам парам парам пам пам <span id="mr-2"></span></p> <p>dolor sit amet</p> </div> </div> <div class="wrapper"> <div class="text"> <p>Тест <span id="mr-1"></span> lorem ipsum</p> <p>парам парам парам пам пам <span id="mr-2"></span></p> <p>dolor sit amet</p> </div> </div>