Ответы пользователя по тегу JavaScript
  • Почему в некоторых браузерах не открывает второй ссылки?

    Seasle
    @Seasle Куратор тега JavaScript
    Чтобы открывать окна при помощи window.open необходимо предоставить разрешение на открытие окон.
    64940a5c3a5de087777251.png
    Ответ написан
  • Как перевести каждую следующую букву в верхний регистр?

    Seasle
    @Seasle Куратор тега JavaScript
    На основе https://www.30secondsofcode.org/js/s/to-camel-case/.
    const toCamelCase = (string = '') => {
      const value = (string.toLowerCase().match(/[a-z]+[0-9]*|[0-9]+/g) ?? [])
        .map((x) => x.slice(0, 1).toUpperCase() + x.slice(1))
        .join('');
    
      return value.slice(0, 1).toLowerCase() + value.slice(1);
    };

    toCamelCase() // ''
    toCamelCase('SOME_NAME_IVAN') // 'someNameIvan'
    toCamelCase('my-super-key') // 'mySuperKey'
    Ответ написан
    Комментировать
  • Регулярное выражение огрнаичение чисел только 4 и от 1900 до 2100?

    Seasle
    @Seasle Куратор тега JavaScript
    /^199\d|20\d{2}|2100$/
    Ответ написан
    Комментировать
  • Как добавить клик в код?

    Seasle
    @Seasle Куратор тега JavaScript
    // использование
    - document.body.getNodesByText('fragment').forEach(
    -   el => el.style.backgroundColor = '#7f7'
    - );
    + const elements = document.body.getNodesByText('fragment');
    + elements[0]?.click();
    + elements.forEach((el) => (el.style.backgroundColor = '#7f7'));
    Ответ написан
    Комментировать
  • Как сделать запрос к такому JSON файлу?

    Seasle
    @Seasle Куратор тега JavaScript
    obj.SRLegacyFoods[0].foodNutrients.find((entry) => entry.nutrient.id === 1093)
    Ответ написан
    Комментировать
  • Почему при клике на "Отмена" - confirm() все равно срабатывает?

    Seasle
    @Seasle Куратор тега JavaScript
    <button class="submit-button">Submit</button>
    document.querySelector('.submit-button')?.addEventListener('click', (event) => {
        event.preventDefault();
    
        if (confirm()) {
            document.querySelector('#cancel-review')?.submit();
        }
    });
    Ответ написан
    Комментировать
  • Как получить читаемое значение promise?

    Seasle
    @Seasle Куратор тега JavaScript
    - console.log(`userId: ${userId}`);
    + console.log('userId:', userId);

    а там уже смотрите, что за объект Вам пришел.
    Ответ написан
    3 комментария
  • Добавление/удаление class при достижение верха окна браузера в модальном окне с position: fixed; overflow: scroll;?

    Seasle
    @Seasle Куратор тега JavaScript
    document.querySelector('.modal-chtML')?.addEventListener('scroll', (event) => {
      if (event.target.scrollTop >= scrollChange) {
        add_class_on_scroll();
      } else {
        remove_class_on_scroll();
      }
    });
    Ответ написан
    Комментировать
  • Регулярное выражение JS для замены тега и содержимого?

    Seasle
    @Seasle Куратор тега JavaScript
    Используйте DOM.
    const tempalte = `
    <span class="c56 c77 c98">текст</span>
    <span class="c101">текст</span>
    <span class="c111">текст</span>
    <span class="c12 c30 c98">текст</span>
    `;
    
    const parser = new DOMParser();
    const root = parser.parseFromString(tempalte, 'text/html');
    
    root.querySelectorAll('.c77, .c98, .c101').forEach((element) => {
        const content = document.createElement('b');
        content.append(...element.childNodes);
        element.replaceWith(content);
    });
    
    console.log(root.body.innerHTML);
    /*
    <b>текст</b>
    <b>текст</b>
    <span class="c111">текст</span>
    <b>текст</b>
    */

    Регулярками примерно так

    const template = `
    <span class="c56 c77 c98">текст</span>
    <span class="c101">текст</span>
    <span class="c111">текст</span>
    <span class="c12 c30 c98">текст</span>
    `.trim();
    const classNames = ['c77', 'c98', 'c101'];
    
    let result = template;
    for (const className of classNames) {
        const expression = new RegExp(`<([\\w-]+)\\s*class=".*${className}.*"\\s*>(.+)</\\1>`, 'gm');
        result = result.replace(expression, (match, tag, content) => `<b>${content}</b>`);
    }

    или
    const classNames = ['c77', 'c98', 'c101'];
    const expression = new RegExp(`<([\\w-]+)\\s*class=".*(${classNames.join('|')}).*"\\s*>(.+)</\\1>`, 'gm');
    const result = template.replace(expression, (match, tag, className, content) => `<b>${content}</b>`);

    Ответ написан
    1 комментарий
  • Как объединить два объекта с одинаковыми ключами?

    Seasle
    @Seasle Куратор тега JavaScript
    const keys = new Set(
      Object.values(data)
        .map((entry) => Object.keys(entry))
        .flat()
    );
    const properties = Object.keys(data).map((key) => [
      key.split("_").shift(),
      key,
    ]);
    
    const result = [...keys].reduce((acc, key) => {
      acc[key] = Object.fromEntries(
        properties.map(([property, type]) => [property, data[type][key] ?? 0])
      );
    
      return acc;
    }, {});

    Другие варианты

    const mappedData = Object.entries(data).reduce((acc, [type, entry]) => {
        const property = type.split('_').shift();
        for (const key in entry) {
            acc[key] = { ...acc[key], [property]: entry[key] };
        }
        return acc;
    }, {});
    console.log(mappedData);
    /* 
    {
        "Машины и оборудование прочие, не включенные в другие группировки": {
            "active": 1,
            "inactive": 2
        },
        "Насосное оборудование, комлектующие, сопутствующие": {
            "active": 1,
            "inactive": 2
        },
        "Электродвигатели, генераторы и трансформаторы силовые": {
            "active": 1,
            "inactive": 2
        },
        "Средства транспортные прочие, не включенные в другие группировки": {
            "active": 1
        }
    }
    */

    или
    const result = {};
    const propertyMap = Object.fromEntries(Object.keys(data).map((key) => [key.split('_').shift(), key]));
    for (const property in propertyMap) {
        for (const key in data[propertyMap[property]]) {
            result[key] ??= {};
            result[key][property] = data[propertyMap[property]][key];
        }
    }
    for (const key in result) {
        for (const property in propertyMap) {
            if (property in result[key] === false) {
                result[key][property] = null;
            }
        }
    }
    console.log(result);
    /*
    {
        "Машины и оборудование прочие, не включенные в другие группировки": {
            "active": 1,
            "inactive": 2
        },
        "Насосное оборудование, комлектующие, сопутствующие": {
            "active": 1,
            "inactive": 2
        },
        "Электродвигатели, генераторы и трансформаторы силовые": {
            "active": 1,
            "inactive": 2
        },
        "Средства транспортные прочие, не включенные в другие группировки": {
            "active": 1,
            "inactive": null
        }
    }
    */

    Ответ написан
    3 комментария
  • Как можно сделать React навигацию по страницам пользователей по их id?

    Seasle
    @Seasle Куратор тега JavaScript
    import * as React from 'react';
    import { createRoot } from 'react-dom/client';
    import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
    
    const users = [
      {
        id: 1,
        firstName: 'John',
        lastName: 'Doe',
        age: 27
      },
      {
        id: 2,
        firstName: 'Emily',
        lastName: 'Green',
        age: 29
      }
    ];
    
    const Home = () => {
      return (
        <ul>
          {users.map(user => (
            <li key={user.id}>
              <Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
            </li>
          ))}
        </ul>
      );
    };
    
    const User = () => {
      const params = useParams();
      const id = parseInt(params.id);
      const user = users.find((entry) => entry.id === id);
      if (user === undefined) {
        return <p>User not found</p>;
      }
    
      return (
        <>
          <ul>
            <li><storng>Firstname</storng>: {user.firstName}</li>
            <li><storng>Lastname</storng>: {user.lastName}</li>
            <li><storng>Age</storng>: {user.age}</li>
          </ul>
          <Link to="/">Go back</Link>
        </>
      );
    };
    
    const root = createRoot(document.getElementById('root'));
    
    root.render(
      <BrowserRouter>
        <Routes>
          <Route index element={<Home />} />
          <Route path=":id" element={<User />} />
        </Routes>
      </BrowserRouter>
    );

    https://reactrouter.com/
    Ответ написан
    Комментировать
  • Как присвоить объекту input.value по id?

    Seasle
    @Seasle Куратор тега JavaScript
    У Вас проверка реализована некорректно: получили ID и его с собой сравнили.
    <div class="parent__block">
      <form class="child__block" data-id="1">
        <div class="">name: </div><input type="text" class="name" name="name">
        <div class="">surname: </div><input type="text" class="surname" name="surname">
        <button type="submit">click</button>
      </form>
    </div>
    <div class="parent__block">
      <form class="child__block" data-id="2">
        <div class="">name: </div><input type="text" class="name" name="name">
        <div class="">surname: </div><input type="text" class="surname" name="surname">
        <button type="submit">click</button>
      </form>
    </div>

    const persons = [
      { id: 1, check: 1 },
      { id: 2, check: 0 }
    ];
    
    const onFormSubmit = (form) => {
      form.addEventListener('submit', (event) => {
        event.preventDefault();
    
        const id = parseInt(form.dataset.id);
        if (!Number.isNaN(id)) {
          const formData = new FormData(form);
          const person = persons.find((person => person.id === id));
    
          person.name = formData.get('name');
          person.surname = formData.get('surname');
          
          console.log(persons);
        }
      });
    };
    
    document
      .querySelectorAll('form[data-id]')
      .forEach((form) => onFormSubmit(form));
    Ответ написан
    1 комментарий
  • JS canvas недо-анимации как пофиксить?

    Seasle
    @Seasle Куратор тега JavaScript
    Нашёл старую демку: https://codesandbox.io/s/qna-q-1246030-gl6m9q. Там иной подход, но есть анимация при нажатых клавишах.

    Демка под зацикленную анимацию
    Ответ написан
  • Как преобразовать список ul в json?

    Seasle
    @Seasle Куратор тега JavaScript
    const collectTree = (itemSelector, elementSelector, root = document) =>
      [...root.querySelectorAll(itemSelector)].map((element) => ({
        name: element.querySelector(elementSelector)?.textContent.trim(),
        child: collectTree(itemSelector, elementSelector, element),
      }));

    collectTree('ul > li', 'a');
    // или
    collectTree(':scope > ul > li', 'a');

    Результат

    [
        {
            "name": "Вегетотропные средства",
            "child": [
                {
                    "name": "Адренолитические средства",
                    "child": [
                        {
                            "name": "Альфа- и бета-адреноблокаторы",
                            "child": []
                        },
                        {
                            "name": "Альфа-адреноблокаторы",
                            "child": [
                                {
                                    "name": "Альфа-адреноблокаторы в комбинациях",
                                    "child": []
                                }
                            ]
                        },
                        {
                            "name": "Бета-адреноблокаторы",
                            "child": [
                                {
                                    "name": "Бета-адреноблокаторы в комбинациях",
                                    "child": []
                                }
                            ]
                        },
                        {
                            "name": "Симпатолитики",
                            "child": [
                                {
                                    "name": "Симпатолитики в комбинациях",
                                    "child": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "Противоопухолевые средства",
                    "child": [
                        {
                            "name": "Алкилирующие средства",
                            "child": []
                        },
                        {
                            "name": "Антиметаболиты",
                            "child": []
                        },
                        {
                            "name": "Другие противоопухолевые средства",
                            "child": []
                        },
                        {
                            "name": "Противоопухолевые антибиотики",
                            "child": []
                        },
                        {
                            "name": "Противоопухолевые гормональные средства и антагонисты гормонов",
                            "child": []
                        },
                        {
                            "name": "Противоопухолевые средства — ингибиторы протеинкиназ",
                            "child": []
                        },
                        {
                            "name": "Противоопухолевые средства — моноклональные антитела",
                            "child": [
                                {
                                    "name": "Противоопухолевые средства — моноклональные антитела в\n                                        комбинациях",
                                    "child": []
                                }
                            ]
                        },
                        {
                            "name": "Противоопухолевые средства растительного происхождения",
                            "child": [
                                {
                                    "name": "Противоопухолевые средства растительного происхождения в\n                                        комбинациях",
                                    "child": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "Разные средства",
                    "child": [
                        {
                            "name": "Вспомогательные вещества, реактивы и полупродукты",
                            "child": []
                        },
                        {
                            "name": "Детское питание (включая смеси)",
                            "child": []
                        },
                        {
                            "name": "Другие разные средства",
                            "child": []
                        },
                        {
                            "name": "Радиопрофилактические и радиотерапевтические средства",
                            "child": []
                        },
                        {
                            "name": "Склерозирующие средства",
                            "child": []
                        },
                        {
                            "name": "Средства для коррекции нарушений при алкоголизме, токсико- и\n                                наркомании",
                            "child": [
                                {
                                    "name": "Средства для коррекции нарушений при алкоголизме, токсико-\n                                        и наркомании в комбинациях",
                                    "child": []
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "Регенеранты и репаранты",
                    "child": [
                        {
                            "name": "Регенеранты и репаранты в комбинациях",
                            "child": []
                        }
                    ]
                }
            ]
        }
    ]

    Ответ написан
    4 комментария
  • Как корректно реализовать код?

    Seasle
    @Seasle Куратор тега JavaScript
    class Hamburger {
        constructor(size, stuffing) {
            this.size = size;
            this.stuffing = stuffing;
            this.toppings = [];
        }
    
        static get SIZE_SMALL() {
            return { name: 'SIZE_SMALL', price: 50, calories: 20 };
        }
    
        static get SIZE_HUGE() {
            return { name: 'SIZE_HUGE', price: 100, calories: 40 };
        }
    
        static get STUFFING_CHEESE() {
            return { name: 'STUFFING_CHEESE', price: 10, calories: 20 };
        }
    
        static get STUFFING_SALAD() {
            return { name: 'STUFFING_SALAD', price: 20, calories: 5 };
        }
    
        static get STUFFING_POTATOE() {
            return { name: 'STUFFING_POTATOE', price: 15, calories: 10 };
        }
    
        static get TOPPING_SAUCE() {
            return { name: 'TOPPING_SAUCE', price: 15, calories: 0 };
        }
    
        static get TOPPING_MAYO() {
            return { name: 'TOPPING_MAYO', price: 20, calories: 5 };
        }
    
        addTopping(topping) {
            this.toppings.push(topping);
            return this;
        }
    
        calculateCalories() {
            const toppingCalories = this.toppings.reduce((total, topping) => total + topping.calories, 0);
            return this.size.calories + this.stuffing.calories + toppingCalories;
        }
    
        calculatePrice() {
            const toppingPrice = this.toppings.reduce((total, topping) => total + topping.price, 0);
            return this.size.price + this.stuffing.price + toppingPrice;
        }
    }

    const hamburger = new Hamburger(Hamburger.SIZE_SMALL, Hamburger.STUFFING_CHEESE);
    
    hamburger.addTopping(Hamburger.TOPPING_MAYO);
    console.log('Calories:', hamburger.calculateCalories());
    
    hamburger.addTopping(Hamburger.TOPPING_SAUCE);
    console.log('Calories:', hamburger.calculateCalories());
    
    console.log('Price with sauce:', hamburger.calculatePrice());
    Ответ написан
    6 комментариев
  • JS. Почему Codewars выдает ошибку?

    Seasle
    @Seasle Куратор тега JavaScript
    Для начала это.
    - if (sheep === undefined || sheep === null) sheep === 0;
    + if (sheep === undefined || sheep === null) sheep = 0;
    Ответ написан
    1 комментарий
  • Почему не работают алиасы вебпака в vite react проэкте?

    Seasle
    @Seasle Куратор тега JavaScript
    Почему они вообще должны заработать?
    Там не Webpack а Rollup.
    https://vitejs.dev/config/shared-options.html#reso...
    Ответ написан
    Комментировать
  • Как функцией перевести двумерный массив в CSV формат и вернуть строку?

    Seasle
    @Seasle Куратор тега JavaScript
    Вам надо экранировать символы ", в том случае, если они есть в строке.
    function escape(value, char = '"') {
        const preparedValue = value?.toString() ?? String(value);
        if (preparedValue.includes(char)) {
            const escapedValue = preparedValue.replaceAll(char, char.repeat(2));
            return char + escapedValue + char;
        }
        return preparedValue;
    }
    
    function toCSV(entries) {
        return entries
            .map((row) => row
                .map((entry) => {
                    if (typeof entry === 'object') {
                        throw new Error('Unexpected value');
                    }
    
                    return escape(entry);
                })
                .join(',')
            )
            .join('\n');
    }
    
    
    console.assert(toCSV([]) === ``);
    console.assert(toCSV([[]]) === ``);
    console.assert(toCSV([['name', 'age']]) === `name,age`);
    console.assert(toCSV([['name', 'age'], ['John', 30]]) === `name,age
    John,30`);
    console.assert(toCSV([[1, 2], ['a', 'b']]) === `1,2
    a,b`);
    console.assert(toCSV([[1, 2], ['a', 'b'], ['c', 'd']]) === `1,2
    a,b
    c,d`);
    console.assert(toCSV([['"text"', 'other "long" text']]) === `"""text""","other ""long"" text"`);
    Ответ написан
    Комментировать
  • Как заменить ссылку по средствам JS обращаясь к data?

    Seasle
    @Seasle Куратор тега JavaScript
    window.addEventListener('DOMContentLoaded', () => {
        const link = document.querySelector('[data-loop="3"] a');
        if (link !== null) {
            link.href = 'https://qna.habr.com/q/1232820';
        }
    });
    Ответ написан