从 Web 表单创建代码片段（易于剪切和粘贴）[关闭]答案

【问题标题】：Create Code Snippet (easy to cut and paste) from Web Form [closed]从 Web 表单创建代码片段（易于剪切和粘贴）[关闭]
【发布时间】：2014-09-27 10:39:22
【问题描述】：

我希望非开发人员能够将文本输入表单中的 4-5 个字段（日期、时间、价格、描述），然后在页面底部有一个显示自定义 HTML 的框自动嵌入答案的代码，因此他们可以剪切和粘贴 HTML。

或者，将表单发送到第二个页面，但将其显示为 HTML 源代码 HTML，他们可以选择全部、剪切，然后粘贴到另一个应用程序中。

谢谢。

text [form field]

name: [bob]
price: [50]
description: [come to our event]
url for event: [url.com/event-02]

<html>
<p class="name">bob</p>
<p class="price">50</p>
<p class="desc">come to our event</p>
<p class="url">Share the <a href="url.com/event-02">event with your friends</a></p> 
</html>

这样他们就不必乱用 HTML。

【问题讨论】：

如果您希望有人为您编写代码……请雇用他们并付钱给他们。谢谢。
你可以用一个电子表格和几个函数来做到这一点。
谢谢Meni，以后我会说得更具体一些（一开始我只是想要一个方向，但是Meni的解决方案很完美）。

标签： javascript php jquery html

【解决方案1】：

尝试让提交按钮触发一个JS函数。

<form action="">
  <!-- your form -->
  <input type="submit" value="Submit" onclick="parseThisCrapIntoHtml(this);return!1" />
</form>

现在，解析成 HTML 应该相对简单，主要由字符串操作组成。

【讨论】：

【解决方案2】：

类似这样，使用val() 从用户那里获取输入：

HTML：

name:<input type="text" id="name" />
<br />
price:<input type="text" id="price"/>
<br />
description:<input type="text" id="description"/>
<br />
url for event:<input type="text" id="url_for_event" />
<br />
<button id="create-html">create html</button>

<div id="result"></div>

JS：

$( "#create-html" ).click(function() {
    var name = '<p class="name">' + $("#name").val() + '</p>';
    var price = '<p class="price">' + $("#price").val() + '</p>';
    var description = '<p class="desc">' + $("#description").val() +'</p>';
    var url_for_event = '<p class="url">Share the <a href="' + $("#url_for_event").val() +'">event with your friends</a></p>';
    $( "#result" ).text(name + price + description + url_for_event);
});

演示：http://jsfiddle.net/cLK7z/2/

【讨论】：