JS/JQuery - 如何迭代 html()，替换字符串的每个实例

Question

我使用标签来识别消息。这个标签就像 DHHS1709PJ。您可以在下面的 HTML 中看到，它有时是元素的 id，有时是元素的值，有时在 href 或 aria-controls 中。我一直在努力寻找一种将整个块解析为字符串的方法，这样我就可以使用正则表达式并替换标记的每个实例，无论它是属性还是值。

我有以下 HTML：

  <li id='msg-DHHS1709PJ' class="draggable">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title"> Message
          <a id="DHHS1709PJ" class="pull-right cancel" href="#">
            <i class="fa fa-times-circle"></i>
          </a>
          <a class="pull-right" data-toggle="collapse" data-perform="panel-collapse" href="#body-DHHS1709PJ" aria-expanded="true" aria-controls="body-DHHS1709PJ">
            <i class="panel-toggle fa fa-minus"></i>
          </a>
        </h3>
        <span>Voiced by: Joe</span>
      </div>
      <div id="body-DHHS1709PJ" class="panel-wrapper collapse in">
      <div class="panel-body">
        Message Copy
      </div>
      </div>
    </div>
  </li>

这可能吗？还是我必须为每个场景编写一段代码？ （例如，编写一段代码来检查 aria-controls 属性，然后编写另一段代码来检查是否有任何元素将标签作为其值，等等）在我看来，最好只迭代整个事情使用正则表达式并查看是否找到任何匹配项，如果是，请将它们替换为我的新标签。

我正在使用 JQuery UI 的 Draggable 函数将上述 HTML 列表项从一个无序列表拖动到另一个无序列表。使用 Helper 功能，我正在克隆整个列表项，但是当它被删除时我需要更改所有标签，这样我就没有两个相同的列表项。

这是我到目前为止的 jQuery... 我已经到了需要迭代所有内容并检查标签是否存在的地步。但如上所述，我在编写同时查看元素值和元素属性的代码时遇到了麻烦。

$( ".draggable" ).draggable({
  connectToSortable: ".new-campaign",
  handle: ".panel-heading",
  cancel: ".panel-toggle",
  containment: "document",
  delay: 150,
  opacity: .75,
  revert: "invalid",
  helper: function(e) {
    workspace = $( '#workspace' ).html(); // the relevant part of the DOM
    clone = $(this).clone(true,true); // make the clone
    tag = clone.find('#msg-tag').text(); // extract the tag
    var_created = false; // trigger for while loop
    while (var_created == false) {
      if ( $(workspace).find( "#msg-"+tag ).length) { // current way i'm checking to see if the tag is already in the DOM
        // a matching tag in the workspace has been found
        // proceed with new tag creation and discovery
      tag += '-new';  
      }
      else {
        var_created = true;
      }

    }

    return clone;
  }

});

使用最终代码编辑

我最终不得不将此函数移动到我的可排序的接收部分：

  receive: function(e, ui){
    var workspace = $( '#workspace' ).html();
    var tag = $(ui.item).find('#msg-tag').text();
    var new_tag = tag;
    var var_created = false;
    var count = 1;
    while (var_created == false) {
      if ( $(workspace).find( "#"+new_tag ).length) {
        new_tag += "-x"+count;
        count += 1;
      }
      else {
        var re = new RegExp(tag, "g")
        $(this).html($(this).html().replace(re, new_tag));
        $( '#body-'+new_tag ).closest('li').attr('id', new_tag);
        var_created = true;
      }
    }
    $(this).find('.cancel').show(); 
    $(this).find('.panel').removeClass('panel-primary').addClass('panel-info');
    ui.item.find('.panel').removeClass('panel-primary').addClass('panel-success');
  }
});

Answer 1

在最高级别，

$(document.body).html($(document.body).html().replace(regex, replacement));

可以为所欲为。

但是，请注意，您可能会丢失任何事件处理程序或附加到 DOM 元素的其他数据。

或者，如果你想替换所有属性，你可以考虑迭代每个 DOM 元素的属性：https://stackoverflow.com/a/2224987/1059070

$('*').each(function(i, e) {
  $.each(e.attributes, function(i, attrib){
    $(e).attr(attrib.name, attrib.value.replace(regex, replacement));
  });
});