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

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

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

Вот мой код:

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() - нет. Поэтому, если я открываю и закрываю строку аккордеона несколько раз, она всегда добавляет избыточный текст, но никогда не удаляет его, так что избыточный текст становится еще более избыточным.

Изменить: изменен «избыточный текст» на избыточный текст. Все еще не работает

Редактировать2:

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

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

Редактировать3:

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

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


javascript jquery appendtext
person Tris    schedule 19.01.2015    source источник
comment
изменить $( "#redundant_text_wrapper").text().replace('redundantText',''); на: $( "#redundant_text_wrapper").text().replace(redundantText,'');   -  person SuperDJ    schedule 19.01.2015
comment
@SuperDJ Поставь это как ответ. :)   -  person Drew Kennedy    schedule 19.01.2015
comment
@BhojendraNepal В изменении используется переменная, содержащая текст. Текущий способ — поиск redundantText в text(), которого не существует.   -  person Drew Kennedy    schedule 19.01.2015
comment
redundantText рассматривается как строка s в предыдущем..   -  person Sarath    schedule 19.01.2015
comment
Вы заменяете текст, но ничего не делаете с результатом   -  person atmd    schedule 19.01.2015
comment
@atmd Вот с чего началась ОП. теперь я изменил свой ответ   -  person SuperDJ    schedule 19.01.2015
comment
изменен «избыточный текст» на избыточный текст. Все равно не работает :(   -  person Tris    schedule 19.01.2015
comment
ни один из ответов еще не решил проблему :(   -  person Tris    schedule 19.01.2015

Ответы (4)


arrow_upward
3
arrow_downward

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

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

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

$( "#redundant_text_wrapper").text( $( "#redundant_text_wrapper").text().replace(/redundantText/g,'') ) ;
person PeterKA    schedule 19.01.2015

arrow_upward
2
arrow_downward

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

Кроме того, поскольку ваш redundantText содержит html, вам, вероятно, следует использовать html() вместо text().

Если вы хотите манипулировать существующим HTML-кодом элемента, вы должны использовать перегрузку html(), которая принимает function (есть также то же самое, доступное для text()). Это получает текущий 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();
});
person Rhumborl    schedule 19.01.2015
comment
Вы правы, хотя это была просто опечатка в моем сообщении. У меня не было кавычек вокруг переменной. - person Tris; 19.01.2015

arrow_upward
0
arrow_downward

Изменять

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

To: 

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

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

Or 

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

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

person SuperDJ    schedule 19.01.2015
comment
это была ошибка в моем сообщении, у меня было это. Все равно не работает :( - person Tris; 19.01.2015
comment
Вы также пробовали это с html() вместо text(). Поскольку html() также получит html-теги a href - person SuperDJ; 19.01.2015

arrow_upward
0
arrow_downward

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

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(); чтобы избавиться от него при закрытии вкладки.

person Tris    schedule 19.01.2015
comment
это нормально, за исключением того, что теперь у вас временно есть повторяющиеся идентификаторы в вашем html, что недействительно - person Rhumborl; 19.01.2015
comment
Хм, я не вижу, какой идентификатор будет дублироваться. Когда я открываю следующую вкладку, первая автоматически закрывается. Так что функция hide.bs.collapse срабатывает и удаляет #redundantText_wrapper из другой вкладки. А для всех остальных вкладок есть идентификаторы вида #collapse_2, #collapse_3 - person Tris; 20.01.2015