Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
-15 / 0 / 0
Регистрация: 12.11.2020
Сообщений: 335

Замена подстроки в строке (можно ли динамически)

19.09.2025, 22:27. Показов 1389. Ответов 28
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
Будьте добры, не подскажите.
Есть:
HTML5
1
<div id="inf1"> inf1  </div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
 id= 11;
 m_st= new Array ();
 m_st[0]= '<p>...</p><button  class="knop" onclick="kn_1 ('+id+');"> kn_1 </button>'+
    "<a href='#' class= 'txt' onclick='kn_1 ();'> open </a>"+
    '<p>...</p>';
 inf1.innerHTML = m_st[0];
 
function kn_1 (id)  {
 m_st[0]= '<p>...</p><button class="knop" onclick="kn_2 ('+id+');"> kn_2 </button>'+
    "<a href='#' class= 'txt' onclick='kn_2 ();'> close </a>"+
    '<p>...</p>';
    inf1.innerHTML = m_st[0];
}
При клике на kn_1 надо заменить вызываемую функцию и тексты кнопок.
В примере элементу массива присваиваю новое значение, но это только для понимания, что должно быть на выходе.

Первый самый простой вариант, который приходит в голову - найти 1-й и последний символы и выполнить замену.
Но нет ли варианта более лучшего, например, можно ли в строку вставить переменную, типа:
m_st[0]= '<p>...</p><button class="knop" onclick= {nam_per} '<p>...</p>';
чтобы при выводе m_st[0] изменяла значение согласно значению переменной nam_per ?
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.09.2025, 22:27
Ответы с готовыми решениями:

Замена подстроки в строке на значение переменной
День добрый! Немного нетривиальная задача. Есть строка. В ней есть поля в формате в формате...

Подскажите регулярное выражение, при помощи которого можно извлечь все находящееся между двумя заданными подстроками.
Подскажите регулярное выражение, при помощи которого можно было бы извлечь все находящееся между...

Возможно ли одним оператором заменить все вхождения подстроки в данную стороку?
Возможно ли одним оператором заменить все вхождения подстроки в данную стороку? Если да, то как?

28
3012 / 1446 / 262
Регистрация: 16.03.2008
Сообщений: 6,445
Записей в блоге: 2
22.09.2025, 10:33
Студворк — интернет-сервис помощи студентам
Вот вариант для избранного
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<div class="news" id="news">
</div>
<script>
    var data = [
        {
            id: 12,
            title: 'Title1',
            body: 'Body 1',
            favorite: false
        },
        {
            id: 124,
            title: 'Title124',
            body: 'Body 124',
            favorite: false
        },
        {
            id: 512,
            title: 'Title 512',
            body: 'Body 512',
            favorite: false
        },
    ];
    // достаем из локального хранилища ИД избранных
    function getFavorites() {
        const stored = localStorage.getItem("favorites");
        try {
            return stored ? JSON.parse(stored) : [];
        } catch (e) {
            return [];
        }
    }
 
    const favorites = getFavorites();
    const box = document.getElementById('news');
 
    // Функци определения текста кнопки используется в двух местах
    const getButtonText = function (item) {
        return item.favorite ? 'Убрать' : 'Добавить';
    }
    // Формируем HTML для элемента по шаблону
    const renderItem = function (cur, item) {
        return cur + `<div><button class="favor" data-id="${item.id}">${getButtonText(item)}</button><div>${item.title}</div><div>${item.body}</div></div>`;
    }
    // Гнереируем контент блока
    const render = function (items) {
        box.innerHTML = items.reduce(renderItem, '');
    }
 
    // Обходим входной массив и проверяем каждый элемент на наличие в избранном
    data.forEach((item) => {
        item.favorite = -1 !== favorites.indexOf(item.id);
    });
 
    // выводим список
    render(data);
 
    // вешаем обработчик кликов на сам блок, внутрь которого будем добавлять динамически элементы
    box.addEventListener('click', function (event) {
        // проверям не нажата ли кнопка
        if (event.target.classList.contains('favor')) {
            // получем ID элемента для которого нажата кнопка
            const id = parseInt(event.target.dataset.id);
            // находим элемент в массиве
            const item = data.find(el => el.id === id);
            if (!!item) {
                if (item.favorite) {
                    // если в избранном выполняем удаление
                     const index = favorites.indexOf(item.id);
                     if (index !== -1) {
                         favorites.splice(index, 1);
                     }
                 } else {
                    // добавляем в избарнное
                     favorites.push(item.id);
                }
                // инвертируем значение флага
                item.favorite = !item.favorite;
                // Меняем текст кнопки
                event.target.innerHTML = getButtonText(item);
                // сохраняем новый спсиок избранного
                localStorage.setItem("favorites", JSON.stringify(favorites));
            }
        }
    });
</script>
1
-15 / 0 / 0
Регистрация: 12.11.2020
Сообщений: 335
22.09.2025, 11:01  [ТС]
Спасибо огромное за советы voral и voraa.

В таком случае могу оставить как есть, потому что у меня весь информационный код формируется в php. Есть несколько одинаковых констант, которые в случае изменения придется корректировать и в js и в php, что не совсем нравится. Не было времени подумать, как и можно ли улучшить - пока веду их список. Можно через параметры, но есть ли в этом смысл (каждый вариант имеет плюсы и минусы) ?

По вопросу делегирования событий. Встречал интересные примеры. Но как-то не сторонник его использования на практике. Когда разные кнопки обращаются к разным функциям, больше нравится когда это происходит напрямую через onclick. В любом случае voral, спасибо за примеры. Это как с трехмерными массивами - никогда не было нужды в их использовании, но в данном проекте подумал, было бы хорошо, посмотрел - поддерживается.

Добавлено через 15 минут
Цитата Сообщение от voral Посмотреть сообщение
Вот вариант для избранного
Спасибо, voral, за пример и потраченное время. Нужно время, чтобы познакомиться с алгоритмом.
Хотя конкретно у меня реализовано иначе, двуступенчато: вначале в indexedDB (при наличии), а потом в sql (по "pagehide"). Было вначале в localStorage, но потом отказался, когда узнал про indexedDB.
И как написал ранее через onclick, потому что есть еще много иных кнопок, которые вызывают разные функции.
0
 Аватар для voraa
1222 / 1109 / 173
Регистрация: 21.01.2024
Сообщений: 5,096
22.09.2025, 13:27
Цитата Сообщение от 755 Посмотреть сообщение
Но как-то не сторонник его использования на практике.
Типа Есть правила дорожного движения, но я не сторонник - Еду Как Хочу.
0
3012 / 1446 / 262
Регистрация: 16.03.2008
Сообщений: 6,445
Записей в блоге: 2
22.09.2025, 13:44
Цитата Сообщение от 755 Посмотреть сообщение
Но как-то не сторонник его использования на практике. Когда разные кнопки обращаются к разным функциям, больше нравится когда это происходит напрямую через onclick
Вы должны понимать несколько моментов:
1. Обработчик на каждый элемент против одного на родительский - это больше ресурсов устройства тратите
2. Если захотите добавить элемент в список динамически - надо не забывать обработчик вешать. Т.е. добавили скриптом - повесили, в варианте с делегированием - повесил обработчик и "забыл" - без разницы есть там элементы, появляются/удаляются ли динамически

Кроме того, зачем вам тогда вообще этот массив? Сформируйте всю страницу на беке. И уже на созданный список вешайте обработку. (и опять же вариант с делегированием - найди один элемент на странице и все.)

А вообще тут дело ваших целей всего этого действа

Ну, а про локал стредж... понято что это только пример. Если эта история исключительно про авторизованных пользователей - там вообще целесообразнее хранить на беке
1
-15 / 0 / 0
Регистрация: 12.11.2020
Сообщений: 335
22.09.2025, 13:51  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Типа Есть правила дорожного движения, но я не сторонник - Еду Как Хочу.
Не совсем так, voraa.
Скажем, при наличии +/- 10 кнопок управления режимами, еще такого же кол-ва информационных кнопок, а также 3-5 кнопок управления страницами вешать один обработчик addEventListener("click", ) на родительский элемент, а потом анализировать, какая кнопка сработала - мне думается, это не лучший алгоритм.
.
0
 Аватар для voraa
1222 / 1109 / 173
Регистрация: 21.01.2024
Сообщений: 5,096
22.09.2025, 14:13
Цитата Сообщение от 755 Посмотреть сообщение
Скажем, при наличии +/- 10 кнопок управления режимами
Никто не предлагает на разные по действию кнопки делегировать события. Но если у вас куча разных дивов с кнопкой "добавить в избранное", то достаточно одного обработчика на все. И если эти дивы приходят динамически, то делегирование - самый лучший метод.
0
-15 / 0 / 0
Регистрация: 12.11.2020
Сообщений: 335
22.09.2025, 14:25  [ТС]
Цитата Сообщение от voral Посмотреть сообщение
1. Обработчик на каждый элемент против одного на родительский - это больше ресурсов устройства тратите
2. Если захотите добавить элемент в список динамически - надо не забывать обработчик вешать.
Спасибо, voral. С вторым пока проблем не возникало. А вот по 1-му пункту вполне возможно, что Вы правы. Да, такая мысль приходила. Но исходил из того, что анализ: в какую функцию направить клик по кнопке займет дольше времени, чем установка 10-20 прерываний для страницы, учитывая, что прерывания ближе к системному уровню работы

Добавлено через 7 минут
Цитата Сообщение от voraa Посмотреть сообщение
Но если у вас куча разных дивов с кнопкой "добавить в избранное", то достаточно одного обработчика на все. И если эти дивы приходят динамически, то делегирование - самый лучший метод.
Спасибо, надо подумать. Мысль интересная.
С ходу, а не стоит ли вешать один обработчик на все кнопки с классом "Избранное"?
0
 Аватар для voraa
1222 / 1109 / 173
Регистрация: 21.01.2024
Сообщений: 5,096
22.09.2025, 14:32
Цитата Сообщение от 755 Посмотреть сообщение
чем установка 10-20 прерываний для страницы, учитывая, что прерывания ближе к системному уровню работы
Убийственная терминология.
Нет в js никаких прерываний. Никогда ничего не прерывается. Есть события, есть очередь событий, есть обработчики событий.

Добавлено через 1 минуту
Цитата Сообщение от 755 Посмотреть сообщение
С ходу, а не стоит ли вешать один обработчик на все кнопки с классом "Избранное"?
Если блок с этой кнопкой появляется динамически, то на нее придется отдельно вешать обработчик. А при делегирование не придется - обработчик на родительском элементе обработает любую такую кнопку.
0
-15 / 0 / 0
Регистрация: 12.11.2020
Сообщений: 335
22.09.2025, 15:06  [ТС]
Цитата Сообщение от voraa Посмотреть сообщение
Убийственная терминология.
Сорри. По инерции.

Добавлено через 20 минут
Цитата Сообщение от voraa Посмотреть сообщение
Если блок с этой кнопкой появляется динамически, то на нее придется отдельно вешать обработчик.
Не сложно повесить после, кстати так и поступаю: вначале вывожу html код с кнопками, а потом уже добавляю обработчики.

Подумал о комбинированном варианте - вешать обработчики на группу функционально однотипных кнопок (что позволит резко уменьшить их количество, раз это плохо), а не делегировании. Все-таки пока не готов отказаться от старой идеологии в пользу делегирования. Тем более, что это затронет достаточно большое количество кода.
Пока приму к сведению.

Еще раз все спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
22.09.2025, 15:06
Помогаю со студенческими работами здесь

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

Замена картинки по подстроке
Подскажите пожалуйста, почему не работает !? Надо по наличию слова в подстроке ставить ту или иную...

Чем можно заменить заменить toggle() ?
Добрый день, у меня такой вопрос. Чем можно заменить toggle(function(), function()); В ранних...

Как вставить подстроку в строку напр. с 5-го символа исх. строки?
вопрос в заголовке я думаю всем ясен, не знаю что тут еще добавить

JavaScript!? Работа со строками, вставка подстроки в строку, prototype!?
функция по идее должна вставлять подстроку в строку напр в. каждый 5-ый элемент исходной строки,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
29
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru