如何用JavaScript的FileReader提取文件中冒号后的指定内容？

你的问题在于当前代码直接把文件的全部内容写入了span，而没有对文本进行解析提取。我们可以通过正则表达式或者字符串拆分的方式，精准提取冒号后的名字部分，再拼接成需要的格式。

方法一：使用正则表达式（简洁高效） #

正则可以快速匹配所有冒号后的内容，适合格式固定的文本：

var reader = new FileReader();
reader.onload = function (event) {
  var contents = event.target.result;
  // 匹配所有"冒号+空格+名字"的部分，捕获名字内容（支持名字带空格）
  var nameMatches = contents.match(/:\s*([^:]+?)(?=\s\w+:|$)/g);
  // 清理匹配结果，去掉冒号和空格，得到纯名字数组
  var names = nameMatches.map(match => match.replace(/:\s*/, ''));
  // 拼接成目标格式
  var usernameText = `Username: ${names.join(' ')}`;
  document.getElementById("username").innerHTML = usernameText;
};
reader.readAsText(file);

正则说明：

• :\s*：匹配冒号和后面的任意空格
• ([^:]+?)：捕获冒号后到下一个"XXX:"或文本结尾的内容，兼容名字带空格的情况，比如"Mary Ann"
• (?=\s\w+:|$)：正向预查，确保只匹配到下一个标签前的内容，避免多取无关字符

方法二：字符串拆分（直观易懂） #

如果对正则不太熟悉，也可以通过拆分字符串的方式实现：

var reader = new FileReader();
reader.onload = function (event) {
  var contents = event.target.result;
  var parts = contents.split(' ');
  var names = [];
  
  // 遍历拆分后的数组，找到带冒号的元素，提取后续的名字内容
  for (let i = 0; i < parts.length; i++) {
    if (parts[i].endsWith(':')) {
      // 处理名字带空格的情况：如果下下个元素不是标签，就合并
      let name = parts[i+1];
      while (i+2 < parts.length && !parts[i+2].endsWith(':')) {
        name += ' ' + parts[i+2];
        i++;
      }
      names.push(name);
    }
  }
  
  var usernameText = `Username: ${names.join(' ')}`;
  document.getElementById("username").innerHTML = usernameText;
};
reader.readAsText(file);

测试效果 #

当文件内容为First Name: John Last Name: Doe时，两种方法都会输出：

Username: John Doe

如果文件内容是First Name: Mary Ann Last Name: Smith，也能正确提取为Username: Mary Ann Smith。

内容的提问来源于stack exchange，提问作者S.Shiro