Question

我有一个基于html的样式指南，其中有几个示例元素如下所示：

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

样式指南会将样式化的html和html编码的代码段显示在一个块中，以便进行简单的复制/粘贴。

目前，对于文档中的每个示例，我都是这样写的，对于每个示例：

<pre class="html" id="collapseAddress">
  <code>&lt;address&gt;
    &lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
    795 Folsom Ave, Suite 600&lt;br&gt;
    San Francisco, CA 94107&lt;br&gt;
    &lt;abbr title=&quot;Phone&quot;&gt;P:&lt;/abbr&gt; (123) 456-7890
    &lt;/address&gt;

    &lt;address&gt;
      &lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
      &lt;a href=&quot;mailto:#&quot;&gt;first.last@example.com&lt;/a&gt;
    &lt;/address&gt;
  </code>
</pre>

这并不理想：它为人为错误留下了很大的空间，它是一个手动过程，需要更新代码片段和代码本身，以及它耗费时间（我懒惰！）。

我更愿意使用.js来自动生成这些代码段。

我倾向于做这样的事情，但我感觉它不能很好地扩展，而且看起来过于复杂。有更好/更简单的方法吗？

<div class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</div>

伪代码.js：

for each $('.codeToGenerate')
  do:
    $(el).next.append(html_encode($(el)))

Answer 1

这是一件简单的事情。它将html转换为实体。

＆＃13;

$('.codeToGenerate').each(function() {
   $(this).text($(this).html())
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>
<pre class="codeToGenerate">
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>
</pre>

＆＃13;

从现有的html自动生成html源文档

1 个答案: