jQuery：将TextArea内容转换为html字符串，反之亦然

Question

我想做的是将TextArea内容转换为有效的HTML代码。假设你在TextArea中输入一些内容，然后按下一个按钮，该按钮会在一个元素中显示已输入的文本。如果你在TextArea中输入像这样的内容：

嗨，大家好！
你喜欢jQuery吗？
我喜欢！

那么你需要放置在''元素中的结果字符串是:

Hi folks!<br>Do you like jQuery?<br>I do!

这是因为 TextArea 内部的换行符必须转换成 <br> 标签！

如果您想将元素的 HTML 放入 TextArea 输入框中，例如：

Hi folks!<br>Do you like jQuery?<br>I do!

应该转换为：

大家好！
你们喜欢jQuery吗？
我喜欢！

那么，有没有一种方法可以将字符串转换为html字符串（反之亦然），还是我应该自己编写一个函数？

先感谢您！

- iakko

---

你可以使用反引号 ``` 来标记内联代码。 - Felix Kling

Answer 1

通过在元素上应用适当的样式，您不需要转换任何内容。使用CSS属性white-space并将值设置为pre，元素中的任何空格都应该与文本区域中完全一样:

#myElement { white-space: pre; }

示例：http://jsfiddle.net/TkpSu/

- Andy E

---

谢谢。虽然这是一个简单的解决办法，但我为了找到这个解决办法浪费了很多时间。 - Mashpy Rahman

小细节：在大多数情况下，#myElement { white-space: pre-wrap; } 可能更适合，以避免用户提交没有换行符的长文本导致内容溢出。 - Johannes

Answer 2

嗯，这并不是非常困难：

$('#element').html($('textarea').html().replace(/\n/g, "<br />"));

- Tatu Ulmanen

---

嗯，我在想是否已经有编写jQuery转换函数的人了，将标签替换为“手”是显而易见的 :) - iakko

这回答了其中的一部分，但是我认为OP想要的是将文本从#element移动到textarea中，仅使用换行符。 - Yaz

我不得不使用val()而不是html()，代码如下： $('#_b').html($('#_a').val().replace(/\n/g, "<br />")); - itsmikem

“这并不是很困难” - 你假设 OP 已经完全掌握了 Javascript 和 jQuery。 - trippyyyreddd

Answer 3

考虑使用一个Markdown编辑器。Stack Overflow使用的是这个的修改版：http://wmd-editor.com/

- Stephen

---

FYI，链接已经失效。 - Nigel Nop