-62 / 2 / 0
Регистрация: 12.11.2020
Сообщений: 407

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

19.09.2025, 22:27. Показов 1466. Ответов 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
3061 / 1463 / 265
Регистрация: 16.03.2008
Сообщений: 6,503
Записей в блоге: 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
-62 / 2 / 0
Регистрация: 12.11.2020
Сообщений: 407
22.09.2025, 11:01  [ТС]
Спасибо огромное за советы voral и voraa.

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

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

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

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

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

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

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

Добавлено через 1 минуту
Цитата Сообщение от 755 Посмотреть сообщение
С ходу, а не стоит ли вешать один обработчик на все кнопки с классом "Избранное"?
Если блок с этой кнопкой появляется динамически, то на нее придется отдельно вешать обработчик. А при делегирование не придется - обработчик на родительском элементе обработает любую такую кнопку.
0
-62 / 2 / 0
Регистрация: 12.11.2020
Сообщений: 407
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
Ответ Создать тему
Опции темы

Новые блоги и статьи
попытка написать игровой сервер на C++
pyirrlicht 29.04.2026
попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .
Контроль уникальности выбранного документа-основания при изменении реквизита
Maks 28.04.2026
Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .
Благородство как наказание
Maks 24.04.2026
У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru