JQuery находит и заменяет текст кнопкой и игнорирует то, что есть при последующих кликах

Question

Когда пользователь выбирает кнопку поиска и замены, он у меня заменяет текст кнопкой и внутри.Это все работает отлично.Если они снова выбирают кнопку «найти и заменить», сценарий поиска / замены не должен изменять существующую комбинацию «кнопка / интервал».Как я не могу перезаписать эту кнопку диапазоном при последующем выборе кнопки поиска и замены для того же ключевого слова и тега?

Это то, что я пробовал ...

<div class="select--highlight--active">Lorem Ipsum is simply dummy text of the printing and typesetting industry standard dummy.</div>

Tag Name:
<p>
    <input class="form-control tag_name" value="1" />
</p>

Find & Replace
<p>
    <input class="form-control the_keyword" value="dummy" />
</p>

$(document).on('click', ".btn_find_replace", function (e) {

            var the_keyword =  $(".the_keyword").val().trim();
            var tag = $(".tag_name").val().trim();
            var re = new RegExp('[^<\\/](' + the_keyword + ')', 'g');

            $(".select--highlight--active").each(function () {
                if ($(this).not(this).find("button,span")) {
                    $(this).html( $(this).html().replace( re, "<button class='btn btn-primary btn-xs ner_tag' data-unique-name data-start='" + tag + "'>" + the_keyword + " <span class='badge margin_left' data-unique-name>" + tag + "</span></button>" ) );
                }
            });
        });

Answer 1

Нашел решение.Добавлен еще один атрибут данных, чтобы я мог найти и заменить эту кнопку по тому же ключевому слову, если оно используется.В основном автоматическое удаление, а затем заменить.

//auto remove all buttons with the same tag name
$('.select--highlight--active').each(function(i,v) {

    if ($(this).find('.ner_tag[data-keyword="' + the_keyword + '"]').length !==0){
         $(this).find('.ner_tag[data-keyword="' + the_keyword + '"]').replaceWith(" " + the_keyword);
    }

    $(this).html( $(this).html().replace( re, "<button class='btn btn-sm ner_tag' style='background:" + stringToColour(tag, 66) + "'  data-unique-name data-start='" + tag + "' data-keyword='" + the_keyword + "' >" + the_keyword + " <span class='badge margin_left' style='background:" + stringToColour(tag,"") + "' data-unique-name>" + tag + "</span></button>" ) );

});

Answer 2

Вы можете использовать jQuery .one().

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

Так что вв вашем случае это будет выглядеть примерно так:

$(".btn_find_replace").one('click', function (e) {

  var the_keyword =  $(".the_keyword").val().trim();
  var tag = $(".tag_name").val().trim();
  var re = new RegExp('[^<\\/](' + the_keyword + ')', 'g');

  $(".select--highlight--active").each(function () {
    if ($(this).not(this).find("button,span")) {
      $(this).html( $(this).html().replace( re, "<button class='btn btn-primary btn-xs ner_tag' data-unique-name data-start='" + tag + "'>" + the_keyword + " <span class='badge margin_left' data-unique-name>" + tag + "</span></button>" ) );
    }
  });
});