我有一个简单的CMS 为我的客户构建。
这个问题是，他可能不是通过锚标签发布链接，而是直接将其复制并粘贴到文本编辑器中。
有没有一种方法可以使用 JavaScript 将这些链接包装在锚标记中？因此，当页面加载而不是看起来链接时：
http://google.com
看起来像这样
<a href="http://google.com" target="_blank">http://google.com</a>
当用户发布答案/问题的 URL 时，Stack Overflow 实际上会这样做（如果这有助于理解我想要实现的目标）。
【问题讨论】：
标签： javascript jquery html anchor
您可以尝试这些方法。使用 data-linkify 之类的自定义属性装饰您希望这些替换生效的标签：
<div data-linkify>something http://google.com something</div><div linkify>something</div>
现在在设置了data-linkify 的任何元素内执行替换。
$('*[data-linkify]').each(function() {
$(this).html($(this).html().replace(/(?:(https?\:\/\/[^\s]+))/m, '<a href="$1">$1</a>'));
});
有一些注意事项。这根本不是一个很好的正则表达式 — 它只匹配以http:// 或https:// 开头的任何内容，直到第一个空格字符。寻找更好的 URL 匹配正则表达式。
另外，对.html() 使用replace 意味着它将破坏任何碰巧落在data-linkify 元素下的现有链接！如果文本链接中碰巧有双引号字符，则会创建损坏的锚元素。
您可以考虑使用某种非常简单的标记来识别链接 — 这比猜测要好得多。
【讨论】：
http 和https，虽然它匹配直到它碰到一个空格，在它之前有可选的标点符号，或者在字符串的结尾，所以https://example.com/a! https://example.com/b, https://example.com/c,d,e https://example.com/f 被解析为<https://example.com/a>! <https://example.com/b>, <https://example.com/c,d,e> <https://example.com/f>。
Array.from(document.querySelectorAll("body,body *")).flatMap((res) => Array.from(res.childNodes)).filter(({nodeType, parentElement}) => nodeType === Document.TEXT_NODE && !parentElement.closest("a,bb,button,details,select,textarea,option,script,noscript,style")).forEach((txt) => { const re = /\bhttps?:\/\/.+?(?=[.?!,]?(?:\s|$))/; while(re.test(txt.textContent)){ const { 0: { length }, 0: url, index: i } = txt.textContent.match(re); txt = txt.splitText(i).splitText(length); txt.previousSibling.replaceWith(Object.assign(document.createElement("a"), { href: url, textContent: url })); } });