Поместите http: // на hrefs, пропускающих протокол в Angular

Question

Я пытался найти решение для замены всех ссылок, у которых нет http:// или https:// перед ссылкой с добавленной версией ссылки на 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 s, тогда он возвращает мусор.

Вот входные данные:

<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

Regex тоже не подходит для этой работы. Вы уже в javascript - у него есть множество инструментов для управления DOM, многие из которых делают именно то, что вы хотите . Пожалуйста, попробуйте использовать их вместо этого, они гораздо более применимы к вашей задаче!

Если вы действительно хотите сделать это с помощью регулярных выражений, href="(?!https?:\/\/)()[^"]+" должен выполнить эту работу.

• href=" Ищите строку href=", чтобы начать сопоставление
• (?!https?:\/\/) Подтвердите, что в начале URL-адреса нет http:// или https://
• () Пустой захват в начале URL-адреса, который вы хотите отредактировать - вставьте сюда свою строку
• [^"]+" Подберите содержимое до следующей кавычки;это остальная часть URL

Demo

Пример программы 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'