Question

基本上我必须将div的内容复制到textarea ，能够在textarea 中编辑它，并且更改应该保存在初始div中。

我需要阻止看起来像data-bind: "some stuff;"的属性，并且可以为初始包装div 的子项设置属性，并在textarea中显示注释。

这是我迄今为止所拥有的内容，遗憾的是没有任何线索如何在获取HTML时排除文本。 https://jsfiddle.net/2kduy9vp/112/

＆＃13;
＆＃13;
$('.editor').html($('.main').html()); $('.editor').on('input propertychange', function(){ $('.main').html($(this).val()); });
＆＃13;
.editor { width: 100%; height: 500px; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main">  <div class="child" data-bind="don't copy me" style="background-color: gray; width: 250px;"> <span> I'm gray, copy me</span> </div>  <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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

为什么不简单地使用div并使用$('.editor').html($('.main').html()); $('.editor').on('input propertychange', function() { $('.main').html($(this).html()); });使其可编辑，您可以应用任何样式来显示您想要的内容：

＆＃13;

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

＆＃13;

<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>

＆＃13;

int c = x*n + y    where, n>x and n>y 

x=c/n 
y=c%n

＆＃13;

Answer 2

如果我理解正确，你只需要对第一个jQuery行应用一些过滤，你可以将.main HTML内容添加到.editor textarea。

这些正则表达式可以解决这个问题：

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

（HTML评论正则表达式从这里开始：Remove HTML comments with Regex, in Javascript）

复制$（＆＃39; div＆＃39;）。html（）需要一些特定的文字

2 个答案: