Replace Regex string html tag in textarea

Question

Hai all how could I Replace Regex string html tag in textarea value with global attribute html example textarea value

<p style="color:red" id="demo1" class="demo1">text</p>

or

<p style="color:red">text</p>

.replace(/<p[^>]*>(.*?)<\/p>/g, "xxxxxxxxxxxxxxx")

How is the value for xxxxxxxxxxxxxxx

I am usinf this jQuery code :

 $("button").on('click', function() {
    var text = $('#demo').val();
    if ( text.match() ){      
        text = text
        .replace(/\<br\s*[\/]?>/g, "<br/>")
        .replace(/\<hr\s*[\/]?>/g, "<hr/>")
        .replace(/\<\/p><p>/g, "</p>\n\n<p>")
        
        // this my problem with all attribute
        // example for <p style="color:red" id="demo1" class="demo1">text</p>
        
        /*
        .replace(/<p[^>]*>(.*?)<\/p>/g, "<p[^>]*>\n$1<\/p>\n")
        */
        ;
        return $('#demo').val(text);
    }
});

textarea {
    width: 80%;
    height: 150px;
}
code {
  color :red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="demo">
<p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor <br><br><br><br><br><br><br>sit amet</p><hr><hr><hr><hr><hr><hr><hr><hr><hr><p style="color:red" id="demo1" class="demo1">Lorem ipsum dolor sit amet</p>
</textarea>

<p>
  <button>REPLACE</button>
</p>

<pre>
1. <code>&lt;br&gt;</code> to <code>&lt;br/&gt;</code>  = ok
2. <code>&lt;hr&gt;</code> to <code>&lt;hr/&gt;</code> = ok
3. <code>&lt;/p&gt;&lt;p&gt;</code> to <code>&lt;/p&gt;\n\n&lt;p&gt;</code> = ok
</pre>

Thank you in advance. sorry my English is not good

Answer 1

Try: (<([a-zA-Z]\w*\s)[^>]*>).*?<\/\2>

Js example:

str.replace(/(<([a-zA-Z]\w*\s)[^>]*>).*?<\/\2>/g, "$1REPLACEMENT</$2>")

Breaking this down:

(            // Start capture group number 1
<            // Match literal opening < of tag
(            // Start capture group number 2
[a-zA-Z]\w*\s  // Match alpha char followed by 0 or more alphanumeric, followed by a space chars (i.e. HTML tag)
)            // End capture group 2
[^>]*        // Match ANYTHING that is not a literal '>' (i.e. rest of opening tag
>            // Match literal closing > of tag
)            // End capture group 1
.*?          // Match ANYTHING until...
<\/\2>       // Match closing tag using backreference to the opening tag from capture group 2

So when this successfully matches we have 2 populated capture groups:

1: Matched the whole opening tag, including it's contents

2: Matched only the tag itself

So our replace pattern can be: $1REPLACEMENT</$2>

NB: This will break if used on HTML with nested tags of the same type. HTML is notoriously difficult to parse using regexp, and ideally you would use an HTML parser instead, but for small use cases it is acceptable.

// Will work
<p>foo</p> => <p>REPLACEMENT</p>
<div class="asdfa">aslkdgladshg</div> => <div class="asdfa">REPLACEMENT</div>
<div class="asfs"><p>asdgaga</p></div> => <div class="asfs">REPLACEMENT</div>

// Won't work (note nested div)
<div class="asdgfasd"><div>asd kbgasdbk</div></div> => <div class="asdgfasd">REPLACEMENT</div>

Answer 2

I think you're looking for .replace(/(<p[^>]*>)(.*?)(<\/p>)/g, "\1\n\2\3\n"). You just need to capture the opening tag and it's classes.