jquery text().replace('','') не работает

Question

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

У меня есть сценарий, который обрабатывает аккордеон, и у меня есть некоторая избыточность в тексте. Поэтому я хочу добавить и удалить лишний текст при открытии или закрытии строки аккордеона.

Вот мой код:

var redundantText = "text text text <a href=\"#contact\">Contact Me</a> text text text";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  $("#redundant_text_wrapper").text().replace(redundantText, '');
}); 

Приложение работает нормально, а text(). Replace() - нет. Поэтому, если я несколько раз открываю и закрываю строку аккордеона, он всегда добавляет избыточный текст, но никогда не удаляет его, так что избыточный текст становится еще более избыточным.

Редактировать: изменил 'redundantText' на redundantText. Все еще не работает

Edit2:

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

также не помогает, он только удаляет ссылку, но текст остается

Edit3:

$( "#redundant_text_wrapper").text(function(index, currentText) {
    return currentText.replace(redundantText,'');
}); 

также удаляет только ссылку, текст остается

Answer 1

Хорошо, я попробовал другой подход сейчас:

var redundantText = "<span id=\"redundantText_wrapper\"> text text text <a href=\"#contact\">Contact Me</a> text text text</span>";

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").after(redundantText);
});
$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
   $('#redundantText_wrapper').remove();
}); 

Поэтому в основном я использую "после" вместо "добавить" и помещаю текст в промежуток с идентификатором. Теперь я могу использовать $('#ID'). Remove(); чтобы избавиться от него при закрытии вкладки.

Answer 2

Которые должны быть:

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace('redundantText','') ) ;

Или, если вы хотите заменить все вхождения:

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace(/redundantText/g,'') ) ;

Answer 3

$( "#redundant_text_wrapper").text().replace('redundantText','') просто получает текстовое значение, заменяет его и ничего не делает с результатом, поэтому эта строка по иронии судьбы избыточна.

Также как ваш redundantText содержит HTML, вы, вероятно, должны использовать html() вместо text(),

Если вы хотите манипулировать существующим html-элементом, вы должны использовать перегрузку html() которая принимает функцию (есть также то же самое для текста ()). Он получает текущий HTML-код элемента и возвращает новый HTML-код для установки:

$( "#redundant_text_wrapper").html(function(index, oldHtml) {
    return oldHtml.replace(redundantText,'');
});

---

Сказав все это, замена всего содержимого оболочки является менее эффективной и может нарушить работу таких элементов, как существующие обработчики событий, в элементах внутри нее. Я бы сказал, что лучше поместить ваш лишний текст в другой элемент, например <span> и вместо этого добавьте и удалите это (или просто покажите и спрячьте):

// wrap it all in a <span> - give it a class to be sure
var redundantText = '<span class="redundant">text text text <a href=\"#contact\">Contact Me</a> text text text</span>';

$('#collapse_1').on('show.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-indicator");
  $(".dropdown_collapse_1").removeClass("dropdown-collapsed");
  $("#redundant_text_wrapper").append(redundantText);
});

$('#collapse_1').on('hide.bs.collapse', function() {
  $(".dropdown_collapse_1").addClass("dropdown-collapsed");
  $(".dropdown_collapse_1").removeClass("dropdown-indicator");
  // just find the span and remove it
  $("#redundant_text_wrapper > span.redundant").remove();
});

Answer 4

+ Изменить

$( "#redundant_text_wrapper").text().replace('redundantText',''); 

Для того, чтобы:

$( "#redundant_text_wrapper").text().replace(redundantText,'');

Удалить кавычки вокруг переменной. Таким образом, он будет рассматриваться как переменная, а не как строка.

Или же

$("#redundant_text_wrapper").text($("#redundant_text_wrapper").text().replace(redundantText,''));

Таким образом, он сначала получит текст, затем заменит его и установит.