检测所有URL并使其可单击，加上<img>标记JSON文件中的包装图像
检测所有URL并使其可单击，加上<img>标记JSON文件中的包装图像
提问于 2019-12-27 13:40:37
我正在尝试从google电子表格中解析一个JSON提要。
其中包括：
- 网站URL；以及以jpg、jpeg、png和jfif.
结尾的
- 图像URL。
在下面这个脚本将所有的URLS转换成可点击的链接。效果很好。我也希望所有的图像都被包装在一个标签中。
//Parse all URLs to links
$(function() {
$('.box-table').each(function() {
$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a class=abbr href="$1">$1</a> '));
});
})这是我试图将所有图像包装在一个标签中的很糟糕的尝试。
//Parse all URLs to links
$(function() {
$('.box-table').each(function() {
$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<img class=abbr" src="$1">$1</img> '));
});
})有什么想法吗？
谢谢
回答 1
Stack Overflow用户
发布于 2019-12-27 14:16:54
您需要从DOM中实例化元素，而不是直接将字符串插入页面。在JQuery中这样做的一个很好的方法，比如一个图像，应该是这样的：
$('<img />', { src: 'SRC_URL', class: 'abr' });您可以将其赋值给一个变量，只需使用insertAfter、append或任何允许节点操作的函数将其插入一个dom节点。
仅供您参考，vanilla JS提供了一个更好的图像实例化过程：
var img = new Image();
img.src = 'myImageUrl';
img.onLoad = function() {
// image loaded
}回到jQuery..。如果要在img节点内嵌套div标记，可以使用以下方法：
$('<div />', { class: 'parent-div'} ).append(
$('<img>', { src: 'SRC_URL', class: 'abr' })
);您还可以将其赋值给一个变量，您将有一个带有嵌套的div标记的img标记。
使用您的代码，我们将得到这样的结果(未经测试，它假设您的代码工作)：
//Parse all URLs to links
$(function() {
$('.box-table').each(function() {
$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, jQuery('<img />', { class: "abbr" src: "$1" }));
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59501645
复制相关文章
相似问题
腾讯云开发者
