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

时间:2015-11-20 17:49:26

标签: javascript jquery html regex

我使用标签来识别消息。这个标签像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列表项从一个无序列表拖到另一个无序列表。使用帮助程序功能,我克隆了整个列表项,但我需要在删除时更改所有标记,以便我没有两个相同的列表项。

这是我到目前为止的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;
  }

});

使用FINAL代码进行编辑

我最终不得不将此功能移动到可排序的接收部分:

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

1 个答案:

答案 0 :(得分:1)

在最高级别,

$dateAdded = new \DateTime('NOW');
$collection->setDateAdded($dateAdded);

可能会做你想要的。

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

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

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