1

I have this

<p>
    <strong>FITZGERALD</strong> (CONT’D)<br>
    Shut up, boy, you don’t get no say in this.<br>
    (back to Henry)<br>
    And in case you hadn’t noticed, Captain, we’re seventeen men short of what we were.
    (off the wounded trapper)<br>
    Eighteen before long.
</p>

I want to add class .wi-dialog for p and wrap each text in brackets ( ) like <span class="wi-remark">( )</span> but after first <br>

So my paragraph will look like this

<p class="wi-dialog">
    <strong>FITZGERALD</strong> (CONT’D)<br>
    Shut up, boy, you don’t get no say in this.<br>
    <span class="wi-remark">(back to Henry)</span><br>
    And in case you hadn’t noticed, Captain, we’re seventeen men short of what we were.
    <span class="wi-remark">(off the wounded trapper)</span><br>
    Eighteen before long.
</p>

I can not solve the problem with the first line. Here is my code

$(document).ready(function(){
    var dialog = $( "p:has(strong)" ).addClass( "wi-dialog" );

    dialog.html(function(i, v) { return v.replace(/.*?(\(.*?\)).*?/g, '<span class="wi-remark">$&</span>') });
})
Andrey Shandrov
  • 427
  • 3
  • 10

1 Answers1

1

This is my solution.

$(document).ready(function(){
  var dialog = $( "p:has(strong)" ).addClass( "wi-dialog" );
  dialog.html(function(i, v) { return v.replace(/(?<=\n)\s*(\(.*?\)).*?/g, '<span class="wi-remark">$&</span>') });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <strong>FITZGERALD</strong> (CONT’D)<br>
  Shut up, boy, you don’t get no say in this.<br>
  (back to Henry)<br>
  And in case you hadn’t noticed, Captain, we’re seventeen men short of what we were.
  (off the wounded trapper)<br>
  Eighteen before long.
</p>
Rob Kwasowski
  • 2,690
  • 3
  • 13
  • 32