自学JavaScript：如何遍历字符串并在HTML中生成独立列表项

我明白你现在的困扰——把一大段系统信息塞进单个列表项里确实乱糟糟的。咱们可以通过分割字符串+处理特殊子项的方式，把每条信息拆成独立的<li>，甚至把Hotfix、网卡这种有子内容的部分做成嵌套列表，让结构更清晰。

第一步：调整HTML结构 #

先把原来单个<li>的结构改成空的有序列表，方便我们插入生成的所有列表项：

<ol id="system-info"></ol>

第二步：修改JavaScript代码 #

核心思路是先把原始字符串按“键名: 值”的规则分割成单独条目，再处理Hotfix、网卡这类包含子项的特殊内容，最后把所有内容转换成列表项插入到HTML里：

// 你的原始系统信息字符串
const data = "Host Name: COMPUTERHOPE OS Name: Microsoft Windows 10 Pro OS Version: 10.0.10586 N/A Build 10586 OS Manufacturer: Microsoft Corporation OS Configuration: Standalone Workstation OS Build Type: Multiprocessor Free Registered Owner: Computerhope Registered Organization: Computer Hope Product ID: 00000-00000-00000-AAAAA Original Install Date: 12/17/2015, 7:09:50 PM System Boot Time: 3/28/2016, 6:57:39 AM System Manufacturer: Dell Inc. System Model: XPS 8300 System Type: x64-based PC Processor(s): 1 Processor(s) Installed. [01]: Intel64 Family 6 Model 42 Stepping 7 Genuine Intel~3401 Mhz BIOS Version: Dell Inc.A06, 10/17/2011 Windows Directory: C:\WINDOWS System Directory: C:\WINDOWS\system32 Boot Device: \Device\HarddiskVolume1 System Locale: en-us; English(United States) Input Locale: en-us; English(United States) Time Zone: (UTC-07:00) Mountain Time(US & Canada) Total Physical Memory: 8,174 MB Available Physical Memory: 2,955 MB Virtual Memory: Max Size: 16,366 MB Virtual Memory: Available: 6,455 MB Virtual Memory: In Use: 9,911 MB Page File Location(s): C:\pagefile.sys Domain: WORKGROUP Logon Server: \\MicrosoftAccount Hotfix(s): 10 Hotfix(s) Installed. [01]: KB3116900[02]: KB3124200[03]: KB3124262[04]: KB3124263[05]: KB3135173[06]: KB3139907[07]: KB3140741[08]: KB3140743[09]: KB3140768[10]: KB3144756 Network Card(s): 2 NIC(s) Installed. [01]: DW1501 Wireless-N WLAN Half-Mini Card Connection Name: Wi-Fi Status: Media disconnected[02]: Broadcom NetLink(TM) Gigabit Ethernet Connection Name: Ethernet DHCP Enabled: Yes DHCP Server: 192.168.1.1 IP address(es)[01]: 192.168.1.52[02]: fe00::b0b0:0000:0000:0000 Hyper-V Requirements: VM Monitor Mode Extensions: Yes Virtualization Enabled In Firmware: Yes Second Level Address Translation: Yes Data Execution Prevention Available: Yes";

// 正则表达式：匹配每个顶级条目开头（比如"Host Name:"、"OS Name:"这种格式）
const splitTopLevel = /(?=[A-Z][a-z]+(?: [A-Z][a-z]+)*: )/g;
// 把原始字符串分割成单个顶级条目数组
let topLevelItems = data.split(splitTopLevel);

// 处理每个条目，重点处理带子项的内容
const processedItems = topLevelItems.map(item => {
  // 处理Hotfix子项
  if (item.includes("Hotfix(s):")) {
    const [hotfixTitle, hotfixContent] = item.split("Installed. ");
    // 分割每个Hotfix条目
    const hotfixList = hotfixContent.split(/(?=\[\d+\]: )/g)
      .map(hf => `<li>${hf.trim()}</li>`)
      .join('');
    return `${hotfixTitle.trim()} Installed.<ol>${hotfixList}</ol>`;
  }
  // 处理网卡子项
  else if (item.includes("Network Card(s):")) {
    const [nicTitle, nicContent] = item.split("Installed. ");
    // 分割每个网卡条目
    const nicList = nicContent.split(/(?=\[\d+\]: )/g)
      .map(nic => {
        // 把网卡的子属性（比如Connection Name、Status）也拆成子列表
        const nicDetails = nic.split(/(?=[A-Z][a-z]+(?: [A-Z][a-z]+)*: )/g)
          .map(detail => `<li>${detail.trim()}</li>`)
          .join('');
        return `<li>${nicDetails}</li>`;
      })
      .join('');
    return `${nicTitle.trim()} Installed.<ol>${nicList}</ol>`;
  }
  // 普通条目直接返回整理后的内容
  else {
    return item.trim();
  }
});

// 把所有处理好的条目转换成<li>标签
const finalListHtml = processedItems.map(item => `<li>${item}</li>`).join('');

// 插入到页面的有序列表中
document.getElementById("system-info").innerHTML = finalListHtml;

代码说明 #

1. 正则分割：用(?=[A-Z][a-z]+(?: [A-Z][a-z]+)*: )这个正向预查正则，找到每个新的“键名:”开头的位置，把字符串分割成独立的条目，不会破坏键名本身。
2. 特殊子项处理：针对Hotfix和网卡这种包含多个子条目的内容，进一步分割并生成嵌套的<ol>列表，让信息层级更清晰。
3. 生成HTML：把每个处理后的条目转换成<li>标签，最后一次性插入到页面的有序列表中，避免频繁操作DOM影响性能。

这样修改后，每条系统信息都会成为独立的列表项，子内容也会以嵌套列表的形式展示，完全符合你的需求~

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