时间戳

首页 > 解决方案 > 检测所有 URL 并使其可点击，并将图像包装在标签 JSON 文件中

javascript - 检测所有 URL 并使其可点击，并将图像包装在标签 JSON 文件中

问题描述

我正在尝试从谷歌电子表格解析 JSON 提要。

其中有：

在此脚本下方，将所有 URL 转换为可点击的链接。哪个工作正常。我还希望所有图像都包含在标签中。

//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> '));
  });
})

有任何想法吗？

谢谢

标签： javascriptjson

解决方案

您需要从 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" }));
  });
})

推荐阅读