如何在JavaScript/jQuery中给字符串的每个句号后添加换行符

嘿，这个需求很容易实现，我给你分两种场景来讲解——纯字符串处理，以及结合jQuery操作DOM的情况：

一、纯JavaScript字符串处理 #

如果只是要处理字符串本身，用正则表达式的replace方法就可以搞定。根据你的需求，有两种常见的写法：

1. 匹配所有句号（不管后面有没有空格） #

这个方法会把所有句号后面加上换行，适合你的示例场景：

var string = 'This is my string. Lorem ipsum. Lorem ipsum.';
// 替换每个句号（含后面的空白字符）为句号+换行
var formattedString = string.replace(/\.(\s*)/g, '.\n');
console.log(formattedString);

输出结果：

This is my string.
Lorem ipsum.
Lorem ipsum.

2. 精准匹配句子结尾的句号（避免缩写被误处理） #

如果你的字符串里有类似Mr.、Dr.这种缩写，上面的方法会把缩写的句号也换成换行。这时候可以用正则的正向预查，只匹配句号后跟着空格+大写字母的情况（符合英文句子的格式）：

var string = 'Mr. Smith. This is my string. Lorem ipsum.';
// 只替换句子结尾的句号
var formattedString = string.replace(/\. (?=[A-Z])/g, '.\n');
console.log(formattedString);

输出结果：

Mr. Smith.
This is my string.
Lorem ipsum.

二、结合jQuery操作DOM元素 #

如果你的文本是在页面DOM元素里，想要在页面上显示换行效果，需要注意：HTML里的\n不会自动换行，得换成<br>标签，或者给元素加CSS样式让浏览器识别换行符：

方法1：替换为<br>标签 #

// 假设文本在id为"content"的元素里
var $content = $('#content');
var originalText = $content.text();
// 先处理换行，再把\n换成<br>
var formattedText = originalText.replace(/\. (\s*)/g, '.\n').replace(/\n/g, '<br>');
$content.html(formattedText);

方法2：保留\n，用CSS实现换行 #

给目标元素添加white-space: pre-line;样式，这样浏览器会自动识别字符串里的换行符：

#content {
  white-space: pre-line;
}

然后JS处理字符串即可：

var $content = $('#content');
var originalText = $content.text();
var formattedText = originalText.replace(/\. (\s*)/g, '.\n');
$content.text(formattedText);

内容的提问来源于stack exchange，提问作者Pat