用另一个HTML标记将HTML标记包装成普通字符串

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

我想在字符串中用另一个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)所有孩子周围的标签IMG标签。

所以输入字符串类似

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

will输出

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

有人能改进吗?我对regex的了解太少了,不能让这件事变得更好。

提问于
用户回答回答于

在DOM解析器中,可能很难创建健壮的正则表达式(例如,请参阅@SLN的答案);当它失败时,它会灾难性地失败。

如果需要对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);
用户回答回答于

一旦敲除完成绑定,我将使用$.ackhttp:/api.jquery.com/row/做我的操纵。

扫码关注云+社区

领取腾讯云代金券