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 就会变得更加冗余。

编辑：将 'redundantText' 更改为 redundantText。还是不行

编辑2：

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

也无济于事，它只会删除 link 但文本会保留

编辑 3：

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

也只删除 link，文本保留

Answer 1

改变

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

收件人：

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

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

或

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

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

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() which takes a function (there is also the same available for text()的重载）。这接收元素的当前 HTML 和 returns 新的 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

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

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 的范围内。现在我可以使用 $('#ID').remove();在关闭选项卡时摆脱它。

jquery text().replace('','') 不工作

jquery text().replace('','') not working

javascript

jquery

appendtext