Задать вопрос
  • Как получить ответы на запросы сторонних скриптов в js?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Делать браузерное расширение не обязательно, вы можете запускать свой код сразу в консоли Ctrl + Shift + J и это не потребует установки никаких расширений. Либо вы можете использовать готовое расширение, например:
    https://chrome.google.com/webstore/detail/custom-j...

    Кроме расширений, таких как выше, также можно использовать блокировщики рекламы. Казалось бы причем тут блокировщики рекламы? Ну просто это их базовый функционал, многие блокировщики рекламы из под коробки позволяют на сторонних сайтах запускать свой код, это называется UserScript или пользовательские скрипты:
    https://kb.adguard.com/ru/general/userscripts

    Насчет того, как именно перехватывать запросы на чужом сайте... для этого на самом деле достаточно заменить метод window.XMLHttpRequest своей собственной функцией, это фактически позволит перехватывать все запросы выполненные посредством XMLHttpRequest, аналогично дела обстоят и c fetch.

    Замена родных нативных методов браузера своими собственными называется манкипатчем:
    https://yandex.ru/search/?text=XMLHttpRequest+fetc...

    Пример простейшего манкипатча:
    var original = {
    	open: XMLHttpRequest.prototype.open,
    	send: XMLHttpRequest.prototype.send
    };
    
    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
    	console.log('Инициируется запрос:', method, url);
    	return original.open.call(this, method, url, async, user, password);
    };
    
    XMLHttpRequest.prototype.send = function (data) {
    	console.log('Отправляются данные:', data);
    	return original.send.call(this, data);
    };
    Ответ написан
    6 комментариев
  • Как изменить чужую HTML страницу через консоль, чтобы изменения сохранялись?

    @AUser0
    Чем больше знаю, тем лучше понимаю, как мало знаю.
    Есть плагины для браузеров, меняющие код страницы на лету. Изменения применяются при каждой загрузке.
    Ответ написан
    Комментировать
  • Как изменить чужую HTML страницу через консоль, чтобы изменения сохранялись?

    Написать плагин для хрома, Фокса и делать что на странице по типу templemonkey
    Ответ написан
    Комментировать
  • Как сформировать файл из текста полученного от бэка?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Примерно так:
    const text = 'Текст для сохранения';
    const blob = new Blob([text], { type: 'text/plain' });
    const content = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = content;
    link.download = 'test.txt';
    document.body.appendChild(link);
    const click = new Event('click');
    link.dispatchEvent(click);
    link.remove();
    Ответ написан
    Комментировать
  • Как разбить textarea на массив?

    mizutsune
    @mizutsune
    I will live forever in the flame of your eyes.
    1. Получаем содержимое textarea.
    2. Используя метод split разбиваем полученное значение на отдельные слова или предложения по разделителю (перенос строки/точка с запятой/запятая/точка/пробел/etc).
    4. Profit.

    Окончательный результат зависит от того => массив каких значений вам нужно получить и в связи с этим, нужно составлять определенные функции, которые будут решать поставленные задачи, при этом нужно учитывать достаточно множество моментов, при которых что-то может пойти не так.

    Несколько примеров

    Пример - №1:

    Задача: Получить простой массив слов, без модификации регистра заглавных букв и без удаления специальных символов, ну и всего остального.

    let value = '   Illusion is the first of all pleasures.   ';
    
    value.split(" ").filter(n => n !== "");


    1. На первом этапе разбиваем строку на массив слов, используя в качестве разделителя пробел.
    2. На втором этапе удаляются пустые значения из массива.

    Результат:

    ['Illusion', 'is', 'the', 'first', 'of', 'all', 'pleasures.']


    Пример - №2:

    Задача: Получить массив слов без специальных символов и прочего.

    let value = `       Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod, tempor et dolore magna aliqua.
    Amet facilisis magna!!! 
    Ornare quam viverra volutpat odio facilisis mauris.    `;
    
    value.split(" ").map(n => n.replace(/[\r\n.,!]/g, '')).filter(n => n !== "");


    1. На первом этапе разбиваем строку на массив слов, используя в качестве разделителя пробел.
    2. На втором этапе удаляем из каждого "слова" точки, запятые и восклицательный знак.

    Результат:

    ["Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing",
    "elit", "sed", "do", "eiusmod", "tempor", "et", "dolore",
    "magna", "aliquaAmet", "facilisis", "magna", "Ornare", "quam",
    "viverra", "volutpat", "odio", "facilisis", "mauris"]


    Пример - №3:

    Задача: Получить массив предложений из текста.

    let value = " Lorem ipsum. Dolor sit amet. Consectetur adipiscing elit.      ";
    
    value.split(".").map(n => n.trim()).filter(n => n!== "").map(n => `${n}.`):


    1. На первом этапе разбиваем строку на массив слов, используя в качестве разделителя символ точки, так как точка символизирует окончание предложения в тексте. По крайней мере, в большинстве случаев.
    2. На втором этапе обрезаем пробелы вначале и в конце каждого элемента массива.
    3. На третьем этапе избавляемся от пустых значений.
    4. На четвёртом этапе расставляем точки на концах строк, чтобы превратить их в предложения.

    Результат:

    ['Lorem ipsum.', 'Dolor sit amet.', 'Consectetur adipiscing elit.']


    Пример - №4:

    Задача: Разделить строку на части и записать их в массив, используя несколько разных разделителей.

    let value = "Lorem ipsum, tempor magna aliqua. Dolor sit amet? Consectetur! Adipiscing elit.";
    
    value.split(/[,.?!]/).map(n => n.trim()).filter(n => n!== "");


    1. На первом этапе разбиваем строку на массив слов, используя в качестве разделителя группу символов.
    2. На втором этапе обрезаем пробелы вначале и в конце каждого элемента массива.
    3. На третьем этапе избавляемся от пустых значений.

    Результат:

    ['Lorem ipsum', 'tempor et dolore magna aliqua', 'Dolor sit amet', 'Consectetur', 'Adipiscing elit']




    Вариантов разделения строки на массив может быть огромное множество.
    Ответ написан
    Комментировать
  • Как ускорить fetch в цикле?

    мне нужно достать первую которая ответила статусом 200

    Например, ты можешь вместо Promise.all использовать Promise.any
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Или Promise.race
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Ответ написан
    1 комментарий
  • Как исправить ошибку "Политика одного источника не разрешает чтение удаленного ресурса"?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    https://developer.mozilla.org/en/docs/Web/HTTP/CORS
    Если вкратце, то доступ со страницы, открытой в браузере с одного домена (foo.com) к другому домену (buz.com) требует, чтобы сервер buz.com возвращал заголовки явно разрешающие доступ для foo.com.
    Это ограничение вшито в браузеры и обходится проксированием запроса через свой бэкенд.
    Скрипт в браузере со страницы foo.com обращается к бэкенду foo.com, тот делает запрос к buz.com и возвращает ответ браузеру.
    Ответ написан
    Комментировать
  • Как создать объект с регистронезависимыми ключами?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Если завернуть объект в Proxy, можно будет изменять ключи при обращениях к объекту:

    const obj = new Proxy({}, {
      get(target, key) {
        const lowerKey = key.toLowerCase();
        return target[Object.hasOwn(target, lowerKey) ? lowerKey : key];
      },
      set(target, key, val) {
        target[key.toLowerCase()] = val;
        return true;
      },
      has(target, key) {
        return key in target || key.toLowerCase() in target;
      },
      defineProperty(target, key, descriptor) {
        return Object.defineProperty(target, key.toLowerCase(), descriptor);
      },
      deleteProperty(target, key) {
        return delete target[key.toLowerCase()];
      },
      getOwnPropertyDescriptor(target, key) {
        return Object.getOwnPropertyDescriptor(target, key.toLowerCase());
      },
    });
    Ответ написан
    1 комментарий
  • Как объединить массивы объектов по значениям одного из свойств их элементов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const merge = (key, ...arrs) =>
      Object.values(arrs.flat().reduce((acc, n) => (
        Object.assign(acc[n[key]] ??= {}, n),
        acc
      ), {}));
    
    const result = merge('id', sum, arr1, arr2);

    или

    const merge = (key, ...arrs) =>
      Array.from(arrs.reduce((acc, arr) => arr.reduce((acc, n) => {
        const k = key(n);
        return acc.set(k, Object.assign(acc.get(k) ?? {}, n));
      }, acc), new Map).values());
    
    const result = merge(n => n.id, sum, arr1, arr2);
    Ответ написан
    4 комментария
  • Как из массива объектов получить данные по id в другом массиве?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const result = arr.map(function(n) {
      return this[n];
    }, Object.fromEntries(sum.map(n => [ n.id, n.name ])));
    
    // или
    
    const result = arr.map(Map.prototype.get.bind(new Map(sum.map(n => [ n.id, n.name ]))));
    
    // или
    
    const result = arr.map(n => sum.find(m => m.id === n)?.name);

    Но что если в массиве sum отсутствуют некоторые из нужных элементов, а получать undefined внутри массива с результатами не хочется?

    Можно подставлять вместо отсутствующих элементов какое-нибудь другое значение:

    const names = Object.fromEntries(sum.map(n => [ n.id, n.name ]));
    const result = arr.map(n => names[n] ?? `объекта с id=${n} нет`);

    Или, есть вариант получать только то, что существует:

    const names = new Map(sum.map(n => [ n.id, n.name ]));
    const result = arr.reduce((acc, n) => ((n = names.get(n)) && acc.push(n), acc), []);
    Ответ написан
    2 комментария
  • Как можно реализовать такую 3Д анимацию?

    RAX7
    @RAX7

    Держи, сделал небольшой набросок.
    а если они касаются друг друга, они приобретают цвет другого элемента

    Эту часть уже лень делать. Хотя это не сложно, нужно только добавить еще две таких же кляксы и посчитать расстояние между их центрами, что бы понять пересекаются ли они и нужно ли у них менять цвет.
    Ответ написан
    1 комментарий
  • Как реализовать такое сравнение строк, JS?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Не надо