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

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

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

我想在字符串中用另一个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);

热门问答

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

主库的binlog被删掉了,从库是否可以用对应的Relay_Log_File同步?

朱明豪从事Oracle、MySQL等数据库工作10年,擅长性能诊断优化、故障处理、SQL优化、业务架构设计、技术培训等。
推荐
1.Waiting for Slave Workers to free pending events, 可能是出现大事务,可能参数slave_pending_jobs_size_max过小 2.“主库设置了expire_logs_days,所以从库的Relay_Mas...... 展开详请

CDN加速时,当带宽超出所设置阈值后关闭CDN服务,是否可以自动重启CDN服务?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务
推荐

触发封顶带宽导致域名关闭后,若您希望继续使用 CDN 服务,可以在重新启动域名加速。

详见https://cloud.tencent.com/document/product/228/7541

是否提供海外CDN加速服务(微信小程序云)?

开元

腾讯云 · 高级工程师 (已认证)

专注给云上客户提供优质的服务
推荐

目前腾讯云是支持海外加速的,CDN加速只和域名有关系,只需要把需要海外加速域名配置海外CDN就就可以。详细见:https://cloud.tencent.com/document/product/673

Dr.Elephant支持hadoop3吗?还有编译一直有包找不到怎么解决?

目前TBDS的hadoop版本是2.7.2,建议配置文件中使用该版本号进行匹配

iOS实时音视频的SDK和Demo有没有Objective-C版本?

腾讯视频云-ZacharyTXLiteAVSDK技术支持
推荐
下载专业版和企业版的压缩包里面带的官方demo是Objective-C的,下载地址:https://cloud.tencent.com/document/product/647/32689 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券