文本区域值到段落 html 仅作为文本答案

【问题标题】：Textarea value to paragraph html as text only文本区域值到段落 html 仅作为文本
【发布时间】：2010-02-08 20:20:24
【问题描述】：

也许主题真的没有正确解释我的问题。我将尝试在这里更准确地解释它。所以我有一个<textarea> 和<p> aragraph 标签。如果我在 textarea 中输入一些文本，然后在单击按钮后我将 textarea 值插入到段落 html 中。如果它的文本一切都很好，但如果它是手写的 html 代码，那就不对了，因为我不希望浏览器解析那个 html 代码。下面是一些涉及 jQuery 的简单示例：

$('.some_button').click(function () {
$('p').html($('textarea').val());
});

那么我如何将 html 代码作为文本插入段落？提前致谢！

【问题讨论】：

为什么使用<p>而不是<pre>？
我使用的是 pre，这只是一个例子，因为 pre 对 html 代码没有帮助:)

标签： jquery html textarea

【解决方案1】：

您需要转义 HTML：

$('p').html($('textarea').val().replace(/</g,'&lt;').replace(/>/g,'&gt;'));

编辑：如前所述，使用.text()，除非您想进行手动转换。

【讨论】：

哇，这是一个冗长的方法，你忘了把&amp;转换成&amp;
啰嗦？也许吧，但它很快而且效果很好。 &显示 HTML 标记不需要转换。
HTML 不仅仅是“标签”。等到数据包含字符串 &copy; 后，您最终会显示版权符号而不是该字符串（任何其他真正的 HTML 实体也是如此）。

【解决方案2】：

使用text 方法。

【讨论】：

不完全是 - text() 只是剥离任何 HTML 并只留下文本内容。如果我正确理解 OP，他想查看实际的 HTML 源代码。
@Pekka - jQuery 文档另有说明：“我们需要注意，此方法会根据需要转义提供的字符串，以便在 HTML 中正确呈现。为此，它调用 DOM 方法.createTextNode()，用它们的 HTML 实体等价物替换特殊字符（例如 < for

【解决方案3】：

David Dorward 已经回答了这个问题，我会添加评论而不是答案，但不确定代码是否会正确显示，所以.. 有了这个

$('.some_button').click(function () {
  $('p').text($('textarea').val());
});

和

<input type='button' class='some_button' value='click!'><br>
<textarea>foo&lt;br&gt;foo</textarea>
<p></p>

单击按钮会在段落中显示“foo
foo”。这是你需要的吗？

--附录--

好吧..我只是一个初级 JavaScripter，所以不确定这有多糟糕 :-) 但是以下内容用它们的 HTML 等价物替换特殊字符，同时用
.

替换换行符

<script type="text/javascript">
String.prototype.htmlents = function() {
  var trans = {'&':'&amp;', '"':'&quot;', '\'':'&#039;', '<':'&lt;', '>':'&gt;'};
  var arr = this.split('');
  for (var i=0;i<arr.length;i++) {
    if (trans.hasOwnProperty(arr[i])) {
      arr[i] = trans[arr[i]];
    }
  }
  return arr.join('');
};

$(document).ready(function(){
  $('.some_button').click(function () {
    $('p').html($('textarea').val().htmlents().replace(/\n/g,'<br>\n'));
  });
});
</script>

记得我之前必须做类似的事情，并且从那时起仍然有 htmlents() 。随意批评:-)

【讨论】：

Textarea 元素被定义为包含 PCDATA，因此需要是 &gt;br 而不是 <br