将 http:// 放在缺少 Angular 协议的 href 上

Question

我一直在尝试找出一种解决方案，将链接前没有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两次（如果有），但如果有两个hrefs，则它会返回垃圾。

这是输入：

<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>

Answer 1

在 Angular 中这样做的正确方法是使用DOMParser。然后你可以选择所有带有锚点的元素标签。然后您可以应用正则表达式来查看它前面是否有 http 或 https。export class UrlCorrector {&nbsp; static correctUrls(input: string): string {&nbsp; &nbsp; const parser = new DOMParser();&nbsp; &nbsp; const document = parser.parseFromString(input, 'text/html');&nbsp; &nbsp; // get all anchor tags from the input&nbsp; &nbsp; const anchorTags = document.getElementsByTagName('a');&nbsp; &nbsp; // if no anchor tags return original input&nbsp; &nbsp; if (anchorTags.length === 0) {&nbsp; &nbsp; &nbsp; return input;&nbsp; &nbsp; }&nbsp; &nbsp; const urls: string[] = [];&nbsp; &nbsp; // iterate through all the anchor tags to find their urls&nbsp; &nbsp; // tslint:disable-next-line: prefer-for-of&nbsp; &nbsp; for (let i = 0; i < anchorTags.length; i++) {&nbsp; &nbsp; &nbsp; const href = anchorTags[i].href;&nbsp; &nbsp; &nbsp; let url = href;&nbsp; &nbsp; &nbsp; // if url has hostname in it, it's a href without http protocol&nbsp; &nbsp; &nbsp; if (href.includes(location.hostname)) {&nbsp; &nbsp; &nbsp; &nbsp; // get just the ending part e.g., `localhost:4200/submissions/facebook.com` will return `facebook.com`&nbsp; &nbsp; &nbsp; &nbsp; url = href.substr(href.lastIndexOf('/') + 1);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; urls.push(url);&nbsp; &nbsp; }&nbsp; &nbsp; for (const url of urls) {&nbsp; &nbsp; &nbsp; // if url does not have a protocol append https:// to front&nbsp; &nbsp; &nbsp; // tslint:disable-next-line: max-line-length&nbsp; &nbsp; &nbsp; if (!url.match('^ (http: \/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$')) {&nbsp; &nbsp; &nbsp; &nbsp; input = input.replace(url, 'https://' + url);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; return input;&nbsp; }}

Answer 2

正则表达式对于这项工作也是错误的。您已经在使用 javascript - 它有大量用于 DOM 管理的工具，其中许多工具完全符合您的要求。请尝试改用这些，它们更适用于您的任务！如果你真的想用正则表达式href="(?!https?:\/\/)()[^"]+"来做，应该做这项工作。href="寻找href="开始比赛的字符串(?!https?:\/\/)断言没有http://或https://在 URL 的开头()&nbsp;在您要编辑的 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'