正则表达式制作标记的超链接

Question

我正在尝试从“[something](link)”创建一个带标签的超链接。

我怎样才能将字符串转换成这样的东西：something，它在论坛中的处理方式？

这是我尝试过的，但我不太了解正则表达式：

$(function() {

  var editor = $('.editor');

  $('.output').html(
    // editor.html().replace(/\[(.*)\)/g, '<a href="'+$1.replace(/\((.*)\)/g)+'">$1</a>')
    editor.html().replace(/\[(.*)\)/g, '<a href="">$1</a>')
  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable class="editor">
  [something](link)
</div>
<div class="output">

</div>

Answer 1

您可以使用/\[(.+)\]\((.+)\)/g，然后使用$1获取链接的文本，使用$2获取链接的href属性：

$n 其中n 是捕获组在正则表达式中的位置（一个数字）：第一个捕获组是$1，第二个是$2，依此类推。

$(() => {
  const editor = $('.editor');
  $('.output').html(editor.html().replace(/\[([^\[]+)\]\((.+)\)/g, '<a href="$2">$1</a>'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable class="editor">
  [a link](https://example.com)
</div>
<div class="output"></div>

Answer 2

解决方案

这个正则表达式应该做你想做的。

/\[(.*?)\]\((.*?)\)/g

此正则表达式还处理输入字符串，如 [something] [something](link)。

\[([^\[]*?)\]\((.*?)\)

说明

此正则表达式将方括号内的所有内容匹配到捕获组 1，直接后跟一个弯曲括号对，其内容进入捕获组 2。捕获组由一个弯曲括号对定义。之后可以使用 $1 和 $2 访问这些捕获组。

覆盖输入字符串[something] [something](link) 的正则表达式不匹配括号对中的所有内容，而是匹配除左括号之外的所有内容。

示例

这是您发布的更新后的 sn-p。

$(function() {

  var editor = $('.editor');

  $('.output').html(
    editor.html().replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')
  );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable class="editor">
  [something](link)
</div>
<div class="output">

</div>