如何使用 Javascript 在 HTML 中添加换行符答案

【问题标题】：How to add line breaks into HTML using Javascript如何使用 Javascript 在 HTML 中添加换行符
【发布时间】：2015-07-14 18:07:21
【问题描述】：

我正在开发一个使用数据馈送的网站。在该数据馈送（通过 CSV 文件传入）中有一段文本。客户正在以项目符号格式输入文本，并希望将其显示为这样。例如：

这里是第一点... *这里是第二点... *这里是第三点...

（客户端对所有点都使用星号，这里是文本编辑器将第一个转换为项目符号）

有谁知道我可以在除第一个 asterix 之外的所有内容之前插入换行符的方法，因此它显示为列表？也许用一点 javascript？

理想情况下，列表应如下所示：

这里的第一点...

这里的第二点...

这里的第三点...

提前致谢，

汤姆

【问题讨论】：

您可以将星号替换为li（因为它们不需要关闭）：text.replace('*', '<li>');
创建一个列表（一个无序的<ul>）并从所有以asterix开头的文本节点中创建列表项（<li>）。使用 CSS 进行格式化，您可以使用选择器 li:first-child 为第一个列表元素设置不同的样式。
难道
也应该有一个结束标签吗？

【解决方案1】：

好的，我从您的问题和 cmets 的混合中猜测，但看起来您列表的呈现 html 是这样的：

<ul>
    <li>First point here... * Second point here... * Third point here...</li>
</ul>

从您的评论来看，您似乎正在使用 jQuery，因此您可以执行以下操作：

$(function() {
    $('li').each(function() {
        var listItem = $(this),
            text =  listItem.text().replace(/\*/g, '<li>');

        listItem.html(text);
    });
});

Example

【讨论】：

谢谢@Pete，html 代码是：
* 这里是第一点... * 这里是第二点... * 这里是第三点...
.我已经更新了脚本以专注于 .property_description 但你知道是否有办法让脚本也添加开始和结束
@TomPerkins，我会这样做：jsfiddle.net/enwwc8q6 但它依赖于星号文本是段落中唯一的文本
看起来很完美，非常感谢。如果有什么可以帮助您的，请告诉我。

【解决方案2】：

使用您可以编写的正则表达式：

input.replace(/\s\*/g, '\n&bull;');

这将用从新行开始的项目符号替换所有以空格字符开头的 *。

如果您需要从输入中制作真正的 HTML 标记（如 li 标签），您将不得不更深入地研究正则表达式。这个MDN 页面是一个很好的起点。

【讨论】：

【解决方案3】：

结合您已有的答案，您可以使用正则表达式将星号替换为<li>。例如：

HTML

<div id="output"></div>

Javascript

var str = ' * one * two * three';
str = str.replace(/\s\*/g, '<li>');
$('#output').html('<ul>'+str+'</ul>');

Jsfiddle

【讨论】：