JavaScript纯文本转HTML工具中Switch语句未遍历所有分支问题

嘿，我瞅到你踩的坑啦！你遇到的核心问题其实是对JavaScript里switch语句的工作机制理解有偏差，再加上代码里还有几个逻辑漏洞，咱们一步步捋清楚：

为什么你的Switch只执行第一个匹配分支？ #

首先得明确：JavaScript的switch是「找到第一个匹配的case后执行，遇到break就直接跳出整个switch块」，它不会遍历所有匹配的分支——这和你之前用的Python if/else逻辑不一样，Python里写多个if会逐个判断，但JS的switch是匹配即停（除非你故意不写break）。

不过更致命的是，你现在是逐个遍历单个字符来做判断的，这直接导致：

• 像'FIRSTNAME'、'[image]'这种多字符的字符串，根本不可能被单个字符的case匹配到（你每次只检查一个字符，比如text_input[counter]只能拿到'F'、'['这种单个字符）；
• 代码里重复写了两次case '\n'，第一个已经处理了换行，第二个永远不会被触发；
• 像case ' - '这种包含三个字符的匹配项，单个字符遍历也完全碰不到。

修正方案：用正则全局替换替代逐个字符遍历 #

既然要处理多字符替换、全局替换的场景，用正则表达式比switch高效得多，而且逻辑更清晰。我给你重写了converter函数，解决了所有问题：

var btn = document.querySelector('.btn')
btn.addEventListener('click', converter);

function converter(){
  let text = document.querySelector('.in_txt').value;
  let textInput = text.trim();
  let outputHtml = '';

  // 空输入直接返回
  if(textInput.length === 0) {
    document.querySelector('.out_html').value = '';
    return;
  }

  // 1. 先处理多字符的全局替换（按从长到短的顺序，避免替换冲突）
  // 替换FIRSTNAME为模板语法
  textInput = textInput.replace(/FIRSTNAME/g, '{% if cons.firstname %}{{cons.firstname}}{% else %}{% endif %}');
  
  // 替换[image]为对应的HTML表格
  textInput = textInput.replace(/\[image\]/g, `<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
      <tr align="center">
        <td>
          <center>
            <a href="link"> <img border="0" style="display: block; margin: 0 auto; height: auto; width: 100%; min-width: 300px; max-width: 560px;" src="image" alt="alt"></a>
          </center>
        </td>
      </tr>
    </tbody>
  </table>`);
  
  // 替换"空格-空格"为&mdash;
  textInput = textInput.replace(/ - /g, '&mdash;');
  
  // 替换单个长破折号为&mdash;
  textInput = textInput.replace(/—/g, '&mdash;');

  // 2. 处理换行和段落：连续换行分割为新段落，单个换行替换为<br>
  const paragraphs = textInput.split(/\n{2,}/); // 匹配连续2个及以上换行
  outputHtml = paragraphs.map(para => {
    let processedPara = para.replace(/\n/g, '<br>'); // 段落内的单个换行转<br>
    processedPara = processedPara.replace(/\t/g, ' '); // 制表符转空格
    return `<p>${processedPara}</p>`;
  }).join('\n');

  // 3. 输出结果
  document.querySelector('.out_html').value = outputHtml;
}

修正点说明： #

1. 多字符替换用正则全局匹配：用/xxx/g语法可以一次性替换所有出现的目标字符串，完美解决你之前单个字符遍历匹配不到多字符串的问题；
2. 合理的替换顺序：先处理长的、复杂的替换项，再处理短的，避免出现替换冲突（比如先替换单个字符再替换多字符会破坏目标字符串）；
3. 更规范的段落结构：把连续换行分割成独立的<p>标签，而不是把所有内容塞在一个<p>里，生成的HTML结构更符合规范；
4. 避免了Switch的逻辑陷阱：直接绕过了switch匹配即停的限制，用更适合的工具解决对应的问题。

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