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

JS/JQuery - How to iterate over html(), replacing every instance of string

本文关键字：字符串 替换 实例 html 何迭代 JS 迭代 JQuery-      更新时间：2023-09-26

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

我有以下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属性，然后编写另一段代码以检查是否有任何元素将标记作为其值，等等）在我看来，最好用regex迭代整个过程，看看是否找到了匹配项，如果找到了，就用我的新标记替换它们。

我使用JQueryUI的Dragable函数将上面的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');
  }
});

在最高级别，

$(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));
  });
});
相关文章：