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

  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;

  }

}

Answer 2

正则表达式对于这项工作也是错误的。您已经在使用 javascript - 它有大量用于 DOM 管理的工具，其中许多工具完全符合您的要求。请尝试改用这些，它们更适用于您的任务！

如果你真的想用正则表达式href="(?!https?:\/\/)()[^"]+"来做，应该做这项工作。

• href="寻找href="开始比赛的字符串

• (?!https?:\/\/)断言没有http://或https://在 URL 的开头

• () 在您要编辑的 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'