JavaScript如何遍历长字符串提取所有指定起止标记的匹配子串并渲染到div

• 函数内部没有循环逻辑，执行完一次截取操作就直接结束，不会继续向后遍历字符串内容
• 所有indexOf调用默认从字符串第0位开始查找，就算重复调用也只会反复匹配到第一条消息的位置，不会推进搜索进度
• 没有维护搜索游标，处理完一条消息后没有将搜索起点移动到当前已处理内容的末尾，后续的匹配内容永远不会被检索到

方案1：手动游标+位置匹配（适配超长字符串，无错位风险） #

该方案通过手动维护搜索位置逐段向后遍历，不会出现跨消息匹配的问题，对百万字符级的长字符串性能表现稳定。
实现要点：

• 统一定义两个标识为常量，避免硬编码导致的拼写错误
• 初始化搜索游标，记录下一次查找的起始位置，默认从字符串开头开始
• 循环执行查找逻辑：从当前游标位置向后定位起始标识，未找到则直接退出循环
• 定位到起始标识后，从该位置向后查找配对的结束标识，遇到无配对结束标识的残缺片段时直接退出循环
• 提取两个标识中间的有效消息内容，按原有DOM结构渲染
• 处理完一条消息后，将游标移动到当前结束标识的末尾，进入下一轮查找，避免重复处理已遍历内容

对应实现代码：

var app = document.querySelector('#app');
// 统一维护标识常量，避免拼写错误
const START_FLAG = '------Begin Message------';
const END_FLAG = '------End Message------';

function parseStr(str) {
  // 游标：记录下一次查找的起始位置
  let cursor = 0;
  while (true) {
    // 从当前游标位置开始查找起始标识
    const startIdx = str.indexOf(START_FLAG, cursor);
    // 无更多匹配，退出循环
    if (startIdx === -1) break;

    // 从起始标识末尾开始查找配对的结束标识
    const endIdx = str.indexOf(END_FLAG, startIdx + START_FLAG.length);
    // 无配对结束标识，退出循环
    if (endIdx === -1) break;

    // 提取两个标识中间的消息内容
    const messageContent = str.substring(startIdx + START_FLAG.length, endIdx);
    // 按原有结构渲染到DOM
    app.innerHTML += `
      <p>${START_FLAG}</p>
      <p>${messageContent}</p>
      <p>${END_FLAG}</p>
    `;

    // 移动游标到当前结束标识的末尾，跳过已处理内容
    cursor = endIdx + END_FLAG.length;
  }
}

parseStr(str);

方案2：全局正则匹配（代码简洁，适合中等长度字符串） #

若字符串总长度在常规范围内，可以用正则一次性匹配所有完整的消息块，代码量更少。实现时需要注意两个核心点：开启全局匹配标记、使用非贪婪匹配规则避免跨条截取内容。

对应实现代码：

var app = document.querySelector('#app');
const START_FLAG = '------Begin Message------';
const END_FLAG = '------End Message------';

function parseStr(str) {
  // 构造全局非贪婪正则，匹配两个标识包裹的完整内容
  const matchReg = new RegExp(`${START_FLAG}(.*?)${END_FLAG}`, 'g');
  // 遍历所有匹配结果
  for (const [, content] of str.matchAll(matchReg)) {
    app.innerHTML += `
      <p>${START_FLAG}</p>
      <p>${content}</p>
      <p>${END_FLAG}</p>
    `;
  }
}

parseStr(str);

方案注意事项：

• 构造正则时如果标识内包含正则特殊字符，需要提前做转义，避免匹配逻辑出错
• 如果消息正文内容可能出现和起始/结束标识完全一致的文本，该方案可能出现匹配错位，优先选择手动游标方案

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