0

Hi all i have paragraph like

<div class="test">
 <div>
    <p>
        <strong class="bold">
   Here's how you can wrap <b>these</b> three <p>words</p> in a string. Huzzah!! 
       </strong>
   </p>
 </div>
</div>

Here if i want to add tag in all word than expected output should be look like this

<div class="test">
 <div>
    <p>
        <strong class="bold">
  <artoon>Here's</artoon> <artoon>how</artoon> <artoon>you</artoon> <artoon>can</artoon> <artoon>wrap</artoon> <b><artoon>these</artoon></b> <artoon>three</artoon> <p><artoon>words</artoon></p> <artoon>in</artoon> <artoon>a</artoon> <artoon>string.</artoon> <artoon>Huzzah!!</artoon>
     </strong>
 </p>

I am trobling this thing since a day so if you have a solution please add comment in this post i want to solve it thank you

So i hope you understand and if not please add comment and ask me.

Thank you

I tried this one

Alex
  • 818
  • 1
  • 8
  • 17
  • Please show us what you have tried? Also, there is a lot of guides on there if you search on google. – Carsten Løvbo Andersen Nov 19 '19 at 12:36
  • https://jsbin.com/sozuxipeqi/edit?html,js,console,output – Alex Nov 19 '19 at 12:38
  • @Alex [Don't use `.getElementsByClassName()`.](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) It's not 1995 anymore. Use `.querySelectorAll()`. – Scott Marcus Nov 19 '19 at 12:39

1 Answers1

0

var txt = document.querySelectorAll('.test')[0].innerHTML;

const re = /<artoon>(<\s*[^>]*>)(.*?)(<\s*[^>]*><\/artoon>)/gi;
const re2 = /([^\s]+)\s/gi;
const result = txt.replace(re2, '<artoon>$1</artoon> ').replace(re, '$1<artoon>$2</artoon>$3')
console.log(result)
<div class="test">
   Here's how you can wrap <b>these</b> three <p>words</p> in a string. Huzzah!!
</div>
NoodleDoodle
  • 26
  • 3