JavaScript：解决随机生成姓名时名与姓之间换行的问题

嘿，我看你遇到了生成完整姓名时，名和姓之间莫名出现换行的问题，这大概率是因为从文件里读取的名字字符串藏着看不见的换行符导致的，我来帮你搞定它！

问题根源 #

你从germannames.txt和surnames.txt读取的文本里，每个名字/姓氏的末尾可能带有换行符（比如\n或者\r\n）——毕竟文本文件里每行内容结束都会有这个标记。当你用split(";")分割后，这些换行符会留在数组元素里，拼接的时候就会把换行带进去，导致名和姓之间被换行隔开。

解决方案 #

我给你两种可行的修复方式，你可以根据自己的需求选：

方式一：提前清理读取文本中的换行符 #

直接修改你的read函数，在返回内容前把所有换行相关的字符去掉，这样后续分割出来的数组元素就干净了：

function read(fileName) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost/Bowixel/" + fileName, false);
  xhr.send(null);
  // 全局替换掉所有回车和换行符
  return xhr.responseText.replace(/[\r\n]/g, "");
}

方式二：拼接时清理每个元素的空白 #

如果不想改动read函数，那就在拼接姓名的时候，给选中的名字和姓氏调用trim()方法——这个方法会去掉字符串前后的所有空白字符（包括换行、空格、制表符等），同时我还建议你在名和姓之间加个空格，让格式更合理：

var name = firstNames[firstNumber].trim() + " " + surNames[surNumber].trim();

额外修复：随机索引的bug #

哦对了，我还发现你生成随机索引的代码有问题：parseInt(Math.random() * firstNames.length +1)会导致数组越界！因为数组的索引是从0开始的，当Math.random()返回接近1的数时，乘以长度再加1就会超出数组的最大索引（最大索引是length-1）。正确的写法应该用Math.floor()来取整：

var firstNumber = Math.floor(Math.random() * firstNames.length);
var surNumber = Math.floor(Math.random() * surNames.length);

这样就能保证每次取到的都是合法的数组索引，不会出现undefined的情况。

完整修改后的代码 #

把上面的修复整合起来，最终的代码是这样的：

// 修复后的读取文件函数
function read(fileName) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost/Bowixel/" + fileName, false);
  xhr.send(null);
  return xhr.responseText.replace(/[\r\n]/g, "");
}

// 生成姓名的主逻辑
var req1 = read("germannames.txt"); 
var req2 = read("surnames.txt"); 
var firstNames = req1.split(";"); 
var surNames = req2.split(";"); 
var times= parseInt(document.getElementById('times').value); 

for (var i = 0; i < times; i++) { 
  // 生成合法的随机索引
  var firstNumber = Math.floor(Math.random() * firstNames.length); 
  var surNumber = Math.floor(Math.random() * surNames.length); 
  // 清理空白并添加空格分隔名和姓
  var name = firstNames[firstNumber].trim() + " " + surNames[surNumber].trim(); 
  // 如果需要每个姓名单独占一行，可以在末尾加\n
  document.getElementById('result').value += name + "\n"; 
}

这样修改后，生成的姓名就会是正常的“名 姓”格式，不会再出现中间换行的问题啦！

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