CODEWITHSUNDEEP
javascriptregex
Tân
Tân

Reputation: 1

\n vs /m in javascript regex

I understand that:

\n stands for new line.

/m stands for multiline matching.

I've written a small example about it:

$('button').click(function () {
  var reg = /(<span>)(\n?)([\[\w\s\.\]]+)(\2)/g;
  var div = $('body > div');
  div.html(div.html().replace(reg, '$1$2[edited...]$4'));
  $('body').append($('<p>').text(div.html()))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  [div text...]
  <div>
    [child div text...]
  </div>
  <span>
    [child span text 1...]
  </span>
  
  <br />
  
  <span>
    [child span text 2...]
  </span>
</div>
<button>click me</button>

It would make some changes:

1/. Find all <span> tags.

2/. Replace the text of each tag with [edited...].

3/. Show parent html to check again.

It works fine.

Here is my questions:

var reg = /(<span>)(\n?)([\[\w\s\.\]]+)(\2)/g;

(<span>): Starting span tag.

(\n?): New line (if need).

([\[\w\s\.\]]+): Standing for [child span text 1/2...].

(\2): New line (if need).

1/. Why does it work without ending span tag (<\/span>)? I mean: it includes the ending tag although I don't require.

2/. In the replacing: .replace(reg, '$1$2[edited...]$4'). I just needn't add </span> tag, it's automatically. It may be a problem if I have a case:

Hey regex, I don't require it. But why are you done it?

Something may be: All modern browser is smart enough to undertand that I need an end tag (</span>). But, I'm working with regex and string, not with HTML.

So, should it be edited in the furture?

3/. If I remove (\n?) and (\2) from the regex. It still works:

$('button').click(function () {
  var reg = /(<span>)([\[\w\s\.\]]+)/g;
  var div = $('body > div');
  div.html(div.html().replace(reg, '$1[edited...]'));
  $('body').append($('<p>').text(div.html()))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  [div text...]
  <div>
    [child div text...]
  </div>
  <span>
    [child span text 1...]
  </span>
  
  <br />
  
  <span>
    [child span text 2...]
  </span>
</div>
<button>click me</button>

Same result for this case: 

var reg = /(<span>)([\[\w\s\.\]]+)/gm;

Clearly, \n and /m don't be required. It's working if I add to or not.

So, are \n and /m similar to?

Upvotes: 0

Views: 48

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

  1. It's not affecting the </span> tag, but since it's there in the source it'll be there in the output, unchanged.

  2. It should be edited, but only because you shouldn't be parsing HTML with regex.

  3. Your list of things to match is [\[\w\s\.\]]+, and \s includes \n so it doesn't change anything if you have (\n?) before it.

Don't use regex.

$('button').click(function () {
  var div = $('body > div');
  div.find("span").text("[edited...]");
  $('body').append($('<p>').text(div.html()));
})

Done...

Upvotes: 1

Related Questions