Javascript HTML 转义但保留换行符

Javascript HTML escaping but preserving linebreaks

本文关键字：保留 换行符 转义 HTML Javascript      更新时间：2023-09-26

我写了一个小的jQuery脚本来帮助我构建一个样式指南。该脚本用于复制和转义一段 HTML，并将其打印为文档。但是，我的问题是在 html 中反转换行符。我希望我的转义 HTML 像我键入它一样格式化。这怎么可能？

$('.documentation-element').each(function() {
  var HTML = $(this).html();
  $(this).next().find('code').text(HTML).html();
});

在此处查看完整示例：http://jsfiddle.net/tolborg/nr7fs/

将text()方法更改为html()：

$(this).next().find('code').html(HTML);

JSFiddle

您使用的是 <code> 标记，但这不会保留换行符。您需要一个<pre>标签。因此，将<code>标签包装在<pre>标签中，您的代码应该按原样工作 - 除了您不需要最后的额外.html()（它不会伤害任何东西，它只是不做任何事情）：

$('.documentation-element').each(function() {
    var HTML = $(this).html();
    $(this).next().find('code').text(HTML);
});

这是一个更新的小提琴。

您可能还想调整每行的前导空格，但您想要的内容将取决于您想要的输出。

例如，下面是一个去除前导空格并删除开头和结尾多余换行符的版本：

$('.documentation-element').each(function() {
    var HTML = $(this).html().trim().replace( /'n's+/, ''n' );
    $(this).next().find('code').text(HTML);
});
相关文章：