Блог

Главная - Вопросы по программированию - Поиск и замена слова, вызывающего дублирование

Поиск и замена слова, вызывающего дублирование

#javascript #replace #find #contains

#javascript #заменить #Найти #содержит

Вопрос:

Я пытаюсь перебрать набор элементов / кнопок DOM. Затем я хочу найти конкретное слово и заменить его двумя словами.

Это работает практически во всех сценариях.

Например, следующий код изменит текст divs на «ЯБЛОКИ».

     let buttons = document.getElementsByClassName("main-buttons");

    for(var i=0; i<buttons.length; i  ) {
        var res = buttons[i].innerHTML.replace(/ORANGE/gi, "APPLES");
        buttons[i].innerHTML = res;
    };

Однако у меня возникла проблема, когда я хочу заменить «ОРАНЖЕВЫЙ» на «ОРАНЖЕВЫЕ ШАРЫ».

Вместо того, чтобы видеть слова «ОРАНЖЕВЫЕ ВОЗДУШНЫЕ ШАРЫ» в моих кнопках. Я вижу «ОРАНЖЕВЫЕ ВОЗДУШНЫЕ ШАРЫ».

     let buttons = document.getElementsByClassName("main-buttons");

    for(var i=0; i<buttons.length; i  ) {
        var res = buttons[i].innerHTML.replace(/ORANGE/gi, "ORANGE BALLOONS");
        buttons[i].innerHTML = res;
    };

Я знаю, что это как-то связано с регулярным выражением и моим циклом захвата «orange», но я задавался вопросом, есть ли лучший способ поиска и замены в javascript.

Или найдите слово и добавьте рядом с ним другое.

Комментарии:

1. каким был ваш текст до того, как вы увидели «ОРАНЖЕВЫЕ ВОЗДУШНЫЕ ШАРЫ»?

2. @GabrielLupu — Это был просто «ОРАНЖЕВЫЙ»

Ответ №1:

Вы можете просмотреть отрицательный результат BALLOONS при сопоставлении ORANGE , чтобы убедиться, что существующее ORANGE BALLOONS не будет изменено:

 for (const button of document.querySelectorAll('.main-buttons')) {
  button.innerHTML = button.innerHTML.replace(
    /ORANGE(?! BALLOONS)/gi,
    'ORANGE BALLOONS'
  );
}

Если каждый из этих элементов содержит только текст, также измените значение innerHTML на textContent — лучше использовать только innerHTML с HTML-разметкой. (в случае обычного текста .textContent более уместно, быстрее и безопаснее)

Метки: ,