Javascript Regex для перевода всех ссылок на сайте с http на https

Question

Я хочу изменить все ссылки на сайте на https, чтобы избежать смешанного контента, потому что мои разработчики всегда забывают изменить ссылки.

Я предполагаю, что с помощью Javascript Regex можно найти HTTP и заменить его на https

.

Я пробовал подобный код, но это был большой провал.

Я верю, что что-то в этом роде будет работать

Я хотел бы использовать код в нижнем колонтитуле сайта, чтобы он работал на всех страницах.

Answer 1

Если вы используете jQuery, вы можете сделать что-то вроде этого:

$(function() {
 $("a").each(function() {
      if ($(this).attr("href").includes("http:"))
           $(this).attr("href",$(this).attr("href").replace("http:","https:"));
 });
 $("img").each(function() {
      if ($(this).attr("src").includes("http:"))
           $(this).attr("src",$(this).attr("src").replace("http:","https:"));
 });
});

НО, я не думаю, что это хорошая идея. Если вы поместите этот скрипт в нижний колонтитул, процессор HTML загрузит все ресурсы по любому протоколу, который у вас есть, HTTP и т. Д. Затем ваш скрипт запустится и, возможно, изменит URL-адреса. Затем процессор HTML загрузит эти ресурсы во второй раз, чтобы обработать их. Если некоторые из этих активов или сценариев или CSS, то страницу придется перерисовывать, возможно, несколько раз, как она будет сохранена. Это может привести к снижению производительности, загрузке дубликатов ресурсов и, возможно, мерцанию страницы.

Если это локальные ресурсы на вашем сервере или CDN, лучшее решение - использовать URL-адреса, не зависящие от протокола, где это возможно. Например:

<a href="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

or <img src="//myserver.com/image1.jpg">

Браузер будет заполнять http или https в зависимости от того, какой протокол использовался для загрузки веб-страницы. Если вы можете заставить своих разработчиков использовать этот метод все время, им не нужно менять протокол.

Answer 2

Вы на самом деле не показывали ни одного кода, который пытались выполнить, но это довольно просто, и его можно сделать еще лучше с умным использованием селекторов запросов и некоторыми методами массива:

[...document.querySelectorAll('*[src], *[href]')].forEach(element => {
  ['src', 'href'].forEach(attribute => {
    if (element[attribute]) {
      element[attribute] = element[attribute].replace(/^http:\/\//ig, 'https://');
    }
  });
});

Answer 3

Вы можете получить HTML-коллекцию всех элементов определенного типа, используя document.getElementsByTagName()

Допустим, вы хотите изменить свойство .src всех <img> элементов.

var elements=document.getElementsByTagName("img");

Теперь, если вы зацикливаете элементы, вы можете изменить их свойство .src, используя объекты String replace () .

elements[0].src=elements[0].src.replace("http","https");

Вот пример использования img и a для иллюстрации процесса:

function replace(htmlElements) {
  for (var a = 0; a < htmlElements.length; a++) {
    var localElement = htmlElements[a];
    var property;
    switch (localElement.localName) {
      case "img":
        property = "src";
        break;
      case "a":
        property = "href";
        break;
    }
    if (localElement[property].indexOf("https") == -1) {
      localElement[property] = localElement[property].replace("http", "https");
    }
  }
}
var elements = document.getElementsByTagName("img");
replace(elements);
elements = document.getElementsByTagName("a");
replace(elements);

<a href="http://www.example.com/linkA">LinkA</a>
<a href="https://www.example.com/linkB">LinkB</a>
<a href="http://www.example.com/linkC">LinkC</a>
<img src="http://picsum.photos/id/469/200/300">
<img src="http://picsum.photos/id/269/200/300">

Answer 4

Я предполагаю, что это выражение или, возможно, модифицированная версия,

(http)(:[^\s]+)

с заменой,

$1s$2

может быть тем, что вы можете искать.

В этой демоверсии объяснено выражение, если вам может быть интересно.

Тест

const regex = /(http)(:[^\s]+)/gm;
const str = `http://some_domain.com/some_link/`;
const subst = `$1s$2`;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log(result);