用另一个 HTML 标记将 HTML 标记包装在纯字符串中

Question

我想将一个 HTML 标记与另一个 HTML 标记包装在一个字符串中（所以不是 DOM 元素，而是一个纯字符串）。我创建了这个函数，但我想知道是否可以在没有 forEach 循环的情况下一次性完成。

这是工作函数：

function style(content) {
    var tempStyledContent = content;

    var imgMatches = tempStyledContent.match(/(<img.*?src=[\"'](.+?)[\"'].*?>)/g);

    imgMatches.forEach(function (imgMatch) {
        var imgTag = imgMatch;
        var imgSrc = imgMatch.match(/src\s*=\s*"(.+?)"/)[1];

        tempStyledContent = tempStyledContent.replace(imgTag,
            "<a href=\"" + imgSrc + "\" data-fancybox>" + imgTag + "</a>");
    });

    return tempStyledContent;
}

参数content 是一个包含HTML 代码的字符串。上面的函数输出与输入相同的 html，但带有 (fancybox) a 标记围绕所有子 img 标签。

所以输入字符串像

"<div><img src='example.jpg'/></div>"

会输出

"<div><a href='example.jpg' data-fancybox><img src='example.jpg'/></a></div>"

有人可以改进吗？我对正则表达式知之甚少，无法让它变得更好。

Answer 1

使用正则表达式处理 HTML 是 notoriously problematic。在 DOM 解析器中微不足道的更改可能很难为其创建健壮的正则表达式；当正则表达式失败时，它会默默地失败，这使得错误很容易被遗漏。在使用正则表达式时，您还必须小心处理标记中所有可能的变化，例如空格、属性顺序、引用样式、标签关闭样式、类似于 html 但您不想修改的属性内容等。

正如下面评论线程中详尽讨论的那样，只要有足够的时间和精力，肯定有可能在正则表达式中处理所有这些事情；但它会导致复杂的、难以维护的正则表达式——最重要的是，很难确定你的正则表达式能适应所有可能的有效标记变化。 DOM 解析会自动处理所有这些内容，并让您直接处理结构化数据，而不必处理其字符串表示中的所有可能变化。

因此，如果您需要对 HTML 字符串进行重大更改，最好将您的 HTML 转换为真正的 DOM 树，使用标准 DOM 方法对其进行操作，然后（如有必要）将其转换回字符串。幸运的是，这样做不需要太多代码。这是一个简单的香草 JS 演示：

var htmlToElement = function(html) {
  var template = document.createElement('template');
  template.innerHTML = html.trim();
  return template.content.firstChild;
};

var elementToHtml = function(el) {
  return el.outerHTML;
}

// Usage demo:
var string = "<div>This <b>is some</b> <i>html</i><img src='http://example.com'></div>";

var foo = htmlToElement(string);

// perform your DOM manipulation as needed on foo here. This would look much simpler if I wasn't so stubborn about avoiding jQuery these days, but here we are anyway:
foo.querySelectorAll('img').forEach(function(img) {
    var link = document.createElement('a');
    link.setAttribute('data-fancybox',true);
    link.setAttribute('href', img.getAttribute('src'));
    img.parentNode.insertBefore(link,img);
    link.appendChild(img);
});

// back to a string:
var bar = elementToHtml(foo);
console.log(bar);

Answer 2

好的，我可能会按照@DanielBeck 的建议进行 DOM 操作。一旦淘汰赛完成绑定，我将使用 $.wrap http://api.jquery.com/wrap/ 进行操作。我只是希望有一种不使用 jquery 的简单方法，所以如果有其他建议，请发表评论。