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() 不能。因此，如果我多次打开和关闭手风琴行，它总是会附加冗余文本，但从不删除它，从而使冗余文本变得更加冗余。

编辑： 将“冗余文本”更改为冗余文本。还是不行

编辑2：

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

也无济于事，它只会删除链接但文本仍然存在

编辑3：

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

也只是删除链接，文本保留

Answer 1

应该是：

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

或者如果你想替换所有出现的：

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

Answer 2

$( "#redundant_text_wrapper").text().replace('redundantText','') 只是获取文本值，替换它并且对结果不做任何事情，因此具有讽刺意味的是，这一行是多余的。

由于您的 redundantText 包含 html，您可能应该使用 html() 而不是 text()。

如果你想操作一个元素的现有html，你应该使用html() which takes a function的重载（还有same available for 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();
});

Answer 3

改变

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

收件人：

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

删除变量周围的引号。这样它将被视为一个变量而不是一个字符串。

或者

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

这样它会先获取文本而不是替换它并设置它。

Answer 4

好的，我现在尝试了不同的方法：

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();
}); 

所以基本上我使用 'after' 而不是 'append' 并将文本放入带有 ID 的 span 中。现在我可以使用 $('#ID').remove();在关闭标签时摆脱它。