让http:// on hrefs缺少一个协议的角
让http:// on hrefs缺少一个协议的角
提问于 2019-10-11 20:05:08
我一直试图找出一个解决方案，在链接前面替换所有没有http://或https://的href，并在链接前添加一个带有http://的链接版本。
目前我有这样的事情：
static correctUrls(input: string): string {
// get all hrefs from the input
let urls = input.match('<a[^>]* href="([^"]*)"/g');
// if no urls return original input
if (!urls) {
return input;
}
// remove duplicate urls
urls = urls.filter((item, pos) => {
return urls.indexOf(item) === pos;
});
// if no urls in input
if (!urls) {
return input;
}
for (const url of urls) {
// if url does not have https
// tslint:disable-next-line: max-line-length
if (!url.match('^ (http: \/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$')) {
input = input.replace(url, 'https://' + url);
}
}
return input;
}任何帮助都将不胜感激。请解释一下你的答案是如何起作用的。我发现了很多类似的问题，但是在我找到的所有解决方案中，当我尝试执行input.match时，它会返回匹配的href两次(如果有一个)，但是如果有两个href，它就会返回垃圾。
以下是输入：
<p> We love
<a href="https://google.com"
rel="noopener noreferrer"
target="_blank">Google</a>
and
<a href="Facebook.com"
rel="noopener noreferrer"
target="_blank">Facebook</a>.
</p>以及预期产出：
<p> We love
<a href="https://google.com"
rel="noopener noreferrer"
target="_blank">Google</a>
and
<a href="https://Facebook.com"
rel="noopener noreferrer"
target="_blank">Facebook</a>.
</p>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-11 21:22:25
在角度上这样做的正确方法是使用DOMParser。然后，可以使用锚标记选择所有元素。然后您可以应用regex来查看它前面是否有http或https。
export class UrlCorrector {
static correctUrls(input: string): string {
const parser = new DOMParser();
const document = parser.parseFromString(input, 'text/html');
// get all anchor tags from the input
const anchorTags = document.getElementsByTagName('a');
// if no anchor tags return original input
if (anchorTags.length === 0) {
return input;
}
const urls: string[] = [];
// iterate through all the anchor tags to find their urls
// tslint:disable-next-line: prefer-for-of
for (let i = 0; i < anchorTags.length; i++) {
const href = anchorTags[i].href;
let url = href;
// if url has hostname in it, it's a href without http protocol
if (href.includes(location.hostname)) {
// get just the ending part e.g., `localhost:4200/submissions/facebook.com` will return `facebook.com`
url = href.substr(href.lastIndexOf('/') + 1);
}
urls.push(url);
}
for (const url of urls) {
// if url does not have a protocol append https:// to front
// tslint:disable-next-line: max-line-length
if (!url.match('^ (http: \/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$')) {
input = input.replace(url, 'https://' + url);
}
}
return input;
}
}Stack Overflow用户
发布于 2019-10-11 20:35:20
Regex对于这项工作也是错误的。--您已经在javascript中了--它有大量用于DOM管理的工具，其中许多工具可以实现正是你想要的。请尝试使用这些代替，他们更适用于你的任务！
如果你真的想用regex来做它，href="(?!https?:\/\/)()[^"]+"应该做这个工作。
href="查找href="字符串来启动匹配(?!https?:\/\/)断言在URL开头没有http://或https://()要编辑的URL开头的空捕获-在这里插入您的字符串[^"]+"匹配内容，直到下一个引号；这是URL的其余部分
使用此方法的示例Javascript程序：
var x = '<p> We love <a href="https://google.com" rel="noopener noreferrer" target="_blank">Google</a> and <a href="Facebook.com" rel="noopener noreferrer" target="_blank">Facebook</a>. <a href="www.example.com" rel="noopener noreferrer" target="_blank">Facebook</a>. <a href="http://www.example.com" rel="noopener noreferrer" target="_blank">Facebook</a>. </p>'
var urls = x.match('href="(?!https?:\/\/)()([^"]+)"')
console.log("https://" + urls[2])'https://Facebook.com'
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58347812
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号