如何在Ruby gsub中利用捕获组替换自定义图片标记？

输入内容 #

<p>some text</p>
[image=content_001]Some alt/legend text[/image]
<div>some div</div>

期望输出 #

<p>some text</p>
<div>
  <img src="blog/content/content_001.webp" alt="Some alt/legend text" />
  <p>Some alt/legend text</p>
</div>
<div>some div</div>

现有代码 #

r = %r{\[image=(.*?)\](.*?)\[/image\]}

content.gsub(r, content_tag(:div) do
  image_tag('blog/content/?.webp', alt: '?') +
  content_tag(:p, '?')
end).html_safe

修改方案 #

需要将代码中的?替换为正则捕获组的引用，有两种实现方式：

方式一：使用全局变量获取捕获组 #

r = %r{\[image=(.*?)\](.*?)\[/image\]}

content.gsub(r) do |match|
  content_tag(:div) do
    image_tag("blog/content/#{$1}.webp", alt: $2) +
    content_tag(:p, $2)
  end
end.html_safe

方式二：使用块参数接收捕获组 #

r = %r{\[image=(.*?)\](.*?)\[/image\]}

content.gsub(r) do |_, image_name, alt_text|
  content_tag(:div) do
    image_tag("blog/content/#{image_name}.webp", alt: alt_text) +
    content_tag(:p, alt_text)
  end
end.html_safe

说明 #

• 正则表达式里的(.*?)是两个捕获组：
  1. 第一个捕获组匹配图片标识（如content_001），对应$1或image_name
  2. 第二个捕获组匹配图片的替代文本（如Some alt/legend text），对应$2或alt_text
• 通过gsub的块处理，动态生成符合要求的HTML结构，替换原有的自定义图片标记。

内容的提问来源于stack exchange，提问作者Daniel Costa