Question

我需要在页面中显示一些Div的代码。应该将Div克隆到具有适当间距和标识的预标签中，并且应该在ie8中工作。

我是首发，所以不知道我是否正确地做到了这一点，到目前为止我写的这个

HTML

//create button after div
    $("<div class='btn'>click to show code</div>").insertAfter(".content-wrapper");

    //create pre wrapper after button
    $("<pre></pre>").insertAfter(".btn");

    //hide the pre so can slidetoggle later
    $("pre").hide();
    
    $(".btn").one("click", function() {
    
      var cloned = $(this).prev().clone();
      var code = $(cloned).html().replace(/</g, "&lt;").replace(/>/g, "&gt;");
      $(this).next().append(code);
    
    });
    
    $(".btn").click(function() {
      $(this).next().slideToggle("fast", function() {
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper-all">
            <div class="content-wrapper">
                <div class="example-div">
                    <span>lorem ipsum first</span>
                </div>
            </div>
        </div>

        <div class="wrapper-all">
            <div class="content-wrapper">
                <div class="example-div">
                    <span>lorem ipsum second</span>
                </div>
            </div>
        </div>

jsfiddle

它可以在.content-wrapper div之后动态添加，按钮和预设，可以滑动切换。

ie8 completeley忽略空格，并且在chrome中，firefox出现一些不需要的空格，输出的代码应该尊重原始div的标识，但是从左边删除空格，代码应该从左边的零空格开始。

Answer 1

我使用以下方法取得了一些成功，基于other answers here。这似乎有点“蛮力”＃34;根据HTML的格式化程度，可能会很脆弱。

基本上，它将HTML内容的行分成一个数组。它确定第一行开头的空格数，并从所有行中删除该空格数。这将重置缩进，以便第一行不缩进，后续行仅相对于第一行缩进。

因此，如果第一行缩进15个空格而第二行缩进20个空格，则第一行不会缩进，第二行将缩进5个空格（20-15）。

$(".btn").one("click", function () {

    var cloned = $(this).prev('.content-wrapper').clone(),

        // Get the code from the clone and split it by new lines.
        // Then filter the array to remove blank lines.
        code = $(cloned).html().split("\n").filter(function (n) {
            return (n.replace(/\s+$/, '') != '');
        }),

        // Determine the number of spaces on the left of the first line
        spacesOnLeft = code[0].match(/^ */)[0].length;

    // loop through each line, removing unnecessary indentation spaces.
    // Append the line to the output area
    for (i in code) {
        var $output = $(this).next(),
            existing_text=$output.text(),
            new_text=code[i].substring(spacesOnLeft);
        $output.text(existing_text + new_text + '\n');
    }

});

以下测试：

＆＃13;

//create button after div
$("<div class='btn'>show code</div>").insertAfter(".content-wrapper");
//create pre wrapper after button
$("<pre></pre>").insertAfter(".btn");
//hide the pre so can slidetoggle later
$("pre").hide();

$(".btn").one("click", function() {

  var cloned = $(this).prev('.content-wrapper').clone(),
    code = $(cloned).html().split("\n").filter(function(n) {
      return (n.replace(/\s+$/, '') != '');
    }),
    spacesOnLeft = code[0].match(/^ */)[0].length;

  for (i in code) {
      var $output = $(this).next(),
          existing_text=$output.text(),
          new_text=code[i].substring(spacesOnLeft);
      $output.text(existing_text + new_text + '\n');
  }

});

$(".btn").click(function() {
  $(this).next().slideToggle("fast", function() {});
});

＆＃13;

.wrapper-all {
  margin-bottom: 40px;
}
.example-div {
  padding: 40px;
  background-color: #ecf0f1;
  text-align: center;
}
.btn {
  padding: 8px 20px;
  background-color: #1abc9c;
  color: white;
  width: auto;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.16s ease-in-out;
}
.btn:hover {
  background-color: #16a085;
}
pre {
  background-color: #34495e;
  color: white;
  margin: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum first</span>
        </div>
    </div>
</div>
<div class="wrapper-all">
    <div class="content-wrapper">
        <div class="example-div">
            <span>lorem ipsum second</span>
        </div>
    </div>
</div>

＆＃13;

使用jquery克隆div并显示为代码

1 个答案: