javascript - JavaScript 正则表达式中的\n 与/m

Question

我的理解是:

\n stands for new line.

/m stands for multiline matching.

我写了一个关于它的小例子:

$('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>

它会做出一些改变:

1/.查找全部 <span>标签。

2/。将每个标签的文本替换为 [edited...] .

3/.显示父级 html 以再次检查。

效果很好。

这是我的问题:

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

(<span>) :起始跨度标签。

(\n?) :换行(如果需要)。

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

(\2) :换行(如果需要)。

1/. 为什么它可以在没有结束跨度标记( <\/span> )的情况下工作？我的意思是:它包含结束标签，尽管我不需要。

2/. 在替换中:.replace(reg, '$1$2[edited...]$4') 。我只是不需要添加 </span>标签，自动的。如果我有一个案例，这可能是一个问题:

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

可能是这样的:所有现代浏览器都足够聪明，可以理解我需要一个结束标记( </span> )。但是，我正在使用正则表达式和字符串，而不是 HTML。

那么，以后是否应该对其进行编辑？

3/. 如果我删除 (\n?)和(\2)来自正则表达式。它仍然有效:

$('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>

本例的结果相同:

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

显然，\n和/m不需要。无论我添加与否，它都有效。

所以，是\n和/m类似于？

Answer 1

1. 这不会影响 </span>标签，但由于它存在于源代码中，因此它也会存在于输出中，保持不变。

2. 应该对其进行编辑，但这只是因为您不应该使用正则表达式解析 HTML。

3. 您要匹配的内容列表是 [\[\w\s\.\]]+ ，和\s包括\n所以如果你有(\n?)，它不会改变任何东西在它之前。

不要使用正则表达式。

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

完成...