replace() regex multiple line break string not working javascript

Question

I have the next string bbcode type [MSG]abc[/MSG] which I want to replace by a friendly string....using a regex

My code works when the bbcode is in the first line only, but when I put some more text within the [MSG] tag with line breaks....it doesnt work....

What am doing wrong?

CODED TRIED

$("button").on("click", function(){
var textarea = $("#textarea").val();
 var regex = /\[MSG\](.*)\[\/MSG]/ig;

   
   textarea = textarea.replace(regex,"converted: $1 --");
   

$("div").text(textarea)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

hello [MSG]abc[/MSG]
<HR>
hello [MSG]a <BR>

bc[/MSG]
<HR>
<textarea id='textarea' rows=3>
hello [MSG]abc[/MSG]
/
hello [MSG]a 

bc[/MSG]

</textarea>

<button>convert</button>
<div></div>

Answer 1

You should use single line mode regex with s switch added:

regex = /[MSG](.*?)[/MSG]/igs;

In regex, dot matches every character except for newline \n. With the single line swtich, all newline characters are integrated into a single string.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

hello [MSG]abc[/MSG]
<HR>
hello [MSG]a <BR>

bc[/MSG]
<HR>
<textarea id='textarea' rows=3>
hello [MSG]abc[/MSG]
/
hello [MSG]a 

bc[/MSG]

</textarea>

<button>convert</button>
<div></div>

<script>
$("button").on("click", function(){
   var textarea = $("#textarea").val();
   var regex = /\[MSG\](.*?)\[\/MSG]/igs;

   textarea = textarea.replace(regex, "converted: $1 --");

   $("div").text(textarea)

})
</script>

This article might be a good beginning of reading https://www.regular-expressions.info/dot.html

$("button").on("click", function(){
   var textarea = $("#textarea").val();
   var regex = /\[MSG\](.*?)\[\/MSG]/igs;
   
   textarea = textarea.replace(regex, "converted: $1 --");
   
   $("div").text(textarea)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
hello [MSG]abc[/MSG]
<HR>
hello [MSG]a <BR>

bc[/MSG]
<HR>
<textarea id='textarea' rows=3>
hello [MSG]abc[/MSG]
/
hello [MSG]a 

bc[/MSG]

</textarea>

<button>convert</button>
<div></div>