复制 $('div').html() 期望一些特定的文本

Question

基本上我必须将DIV的内容复制到TextArea ，具有在TextArea 中进行编辑的能力，并且更改应保存在初始div中

我需要防止看起来像 data-bind: "some stuff;"的属性，可以为初始包装器div 的孩子设置，以及在文本中显示的注释。

这是我到目前为止所拥有的，可悲的是，没有任何线索在获得HTML时如何排除文本。https://jsfiddle.net/2kduy9vp/112/

$('.editor').html($('.main').html());
$('.editor').on('input propertychange', function(){
	$('.main').html($(this).val());
});

.editor {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>
<textarea class="editor"></textarea>

Answer 1

为什么不简单地使用DIV并使用contenteditable="true"使其可编辑，并且您可以应用任何样式以显示内容：

$('.editor').html($('.main').html());
$('.editor').on('input propertychange', function() {
  $('.main').html($(this).html());
});

.editor {
  margin-top: 20px;
  ;
  width: 100%;
  height: 500px;
  padding: 50px;
}
.editor>div {
  background: #fff!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me-too" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>
<div class="editor" contenteditable="true"></div>

Answer 2

如果我正确理解您，您只需要将一些过滤应用于第一个jQuery系列，在其中您将.main HTML内容添加到.editor TextArea中。

这些言论应该可以解决：

$('.editor').html($('.main').html()
   .replace(/<!--[sS]*?-->/g, "")
   .replace(/data-bind="[sS]*?" /g, ""));

（HTML评论REGEX从这里获取：在JavaScript中删除HTML注释）