如何无需forEach循环，在纯字符串中实现img标签的a标签包裹？

Got it, let's streamline this function to ditch the forEach loop and handle all replacements in one go with a regex. The key is to use a regex with capture groups to extract the necessary parts, then leverage String.replace() with a callback to build the wrapped tag directly.

Here's the optimized version:

function style(content) {
  // Match escaped img tags, capture the full tag, quote type, and src value
  return content.replace(/(<img.*?src=(["'])(.+?)\2.*?>)/g, (match, fullImgTag, quote, srcUrl) => {
    return `<a href="${srcUrl}" data-fancybox>${fullImgTag}</a>`;
  });
}

What's improved here: #

• No loops required: The global regex (g flag) finds all matching img tags in one pass, and the replace callback handles each match individually under the hood.
• Quotation mark compatibility: The regex uses (["']) to capture either single or double quotes around the src value, then \2 ensures we match the same closing quote—this fixes a limitation in the original code which only handled double quotes.
• Cleaner and more efficient: We skip creating intermediate arrays with match() and transform the content in a single, concise operation.

Test example: #

Input:

"<div><img src='example.jpg'/><img src=\"another.png\" alt=\"test\"></div>"

Output:

"<div><a href=\"example.jpg\" data-fancybox><img src='example.jpg'/></a><a href=\"another.png\" data-fancybox><img src=\"another.png\" alt=\"test\"></a></div>"

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