循环遍历字符串时如何识别换行符 ？附HTML文本转换需求

嘿，我来帮你搞定这个问题！你遇到的换行符识别失败，还有生成特定格式HTML的需求，我给你梳理清楚解决方案：

你之前用myText[i] == "…"肯定不行，因为字符串里的换行符是不可见的转义字符，不是你看到的省略号。不同系统的换行符格式不一样：

• 大部分现代系统（Unix/Linux/macOS）用\n（换行符）
• 旧版Windows用\r\n（回车+换行的组合）
• 极少数老系统用\r（回车）

所以遍历的时候，判断条件要覆盖这些情况，还要注意处理\r\n的组合避免重复操作：

for (let i = 0; i < myText.length; i++) {
  const currentChar = myText[i];
  // 匹配所有类型的换行符
  if (currentChar === '\n' || currentChar === '\r') {
    // 这里执行你需要的特定操作
    // 处理\r\n的情况：跳过下一个\n，避免重复触发
    if (currentChar === '\r' && myText[i+1] === '\n') {
      i++;
    }
    // 比如记录分段的位置，准备生成span
  }
}

你的核心需求是把文本按换行分割，每段用带text-from和text-to属性的<span>包裹，中间用<br/>分隔。我写了一个完整的实现函数，直接能用：

function formatTextToSpanStructure(rawText) {
  let htmlOutput = '';
  let segmentStartIndex = 0;
  let i = 0;

  while (i < rawText.length) {
    const char = rawText[i];
    // 遇到换行符时，处理当前段落
    if (char === '\n' || char === '\r') {
      // 提取当前段落的文本
      const segmentText = rawText.slice(segmentStartIndex, i);
      // 只生成非空的span
      if (segmentText.trim() !== '') {
        htmlOutput += `<span text-from="${segmentStartIndex}" text-to="${i - 1}">${segmentText}</span>`;
      }
      // 添加换行标签
      htmlOutput += '<br/>';
      // 跳过\r\n的第二个字符
      if (char === '\r' && rawText[i+1] === '\n') {
        i++;
      }
      // 更新下一段的起始索引
      segmentStartIndex = i + 1;
    }
    i++;
  }

  // 处理文本末尾没有换行符的最后一段
  if (segmentStartIndex < rawText.length) {
    const lastSegment = rawText.slice(segmentStartIndex);
    htmlOutput += `<span text-from="${segmentStartIndex}" text-to="${rawText.length - 1}">${lastSegment}</span>`;
  }

  return htmlOutput;
}

// 示例测试
const testText = "ABCDE\nFGHI";
console.log(formatTextToSpanStructure(testText));
// 输出：<span text-from="0" text-to="4">ABCDE</span><br/><span text-from="6" text-to="9">FGHI</span>

额外提示 #

如果你的文本里包含HTML特殊字符（比如<、>、&），直接插入会导致格式混乱甚至XSS风险，记得先转义：

// 简单的HTML转义函数
function escapeHtml(text) {
  const tempDiv = document.createElement('div');
  tempDiv.textContent = text;
  return tempDiv.innerHTML;
}
// 使用时替换segmentText为escapeHtml(segmentText)

内容的提问来源于stack exchange，提问作者Örom Loidl