如何在textarea左侧准确定位并高亮逗号分隔异常行

问题根源 #

1. 原代码用textarea.scrollHeight * (error - 1)计算行位置，scrollHeight是文本域整体高度，并非单行高度，导致定位完全偏差
2. 未清除历史错误标记，重复点击按钮会生成大量冗余红点
3. 预期逗号数逻辑错误：直接取第一行的逗号数作为标准，不符合「多数行标准」的需求

修正方案 #

以下是完整的修复代码，解决了定位偏差、重复标记和标准值错误三个核心问题：

<!DOCTYPE html>
<html>
<head>
  <title>Comma Count Checker</title>
</head>
<body>
  <h1>Comma Count Checker</h1>
  <!-- 新增容器包裹textarea和红点，实现相对定位 -->
  <div class="textarea-container">
    <textarea id="textareaInput" rows="5" cols="30"></textarea>
  </div>
  <div id="outputDiv"></div>
  <button onclick="checkCommaCount()">Check Comma Count</button>

  <style>
    .textarea-container {
      position: relative;
      margin: 10px 0;
    }
    #textareaInput {
      padding-left: 20px; /* 给红点留出空间 */
      line-height: 1.5; /* 明确行高，确保定位准确 */
    }
    .error-dot {
      position: absolute;
      left: 5px;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      transform: translateY(-50%); /* 垂直居中对齐行文本 */
    }
  </style>

  <script>
    function checkCommaCount() {
      const textarea = document.getElementById('textareaInput');
      const container = document.querySelector('.textarea-container');
      const outputDiv = document.getElementById('outputDiv');
      
      // 1. 清除历史错误标记
      document.querySelectorAll('.error-dot').forEach(dot => dot.remove());

      const text = textarea.value.trim();
      if (!text) {
        outputDiv.innerHTML = '<h2>请输入内容</h2>';
        return;
      }

      const rows = text.split('\n').filter(row => row.trim() !== ''); // 过滤空行
      if (rows.length === 0) {
        outputDiv.innerHTML = '<h2>请输入有效内容</h2>';
        return;
      }

      // 2. 统计所有行的逗号数，取出现次数最多的作为标准
      const commaCountMap = {};
      rows.forEach(row => {
        const count = row.split(',').length - 1;
        commaCountMap[count] = (commaCountMap[count] || 0) + 1;
      });
      const expectedCommaCount = Object.keys(commaCountMap).reduce((a, b) => 
        commaCountMap[a] > commaCountMap[b] ? a : b
      );

      // 3. 找出异常行的索引（从0开始）
      const errorRows = [];
      rows.forEach((row, index) => {
        const count = row.split(',').length - 1;
        if (count != expectedCommaCount) {
          errorRows.push(index);
        }
      });

      // 4. 定位并添加红点
      errorRows.forEach(rowIndex => {
        // 利用选区API定位行的起始位置
        textarea.focus();
        textarea.setSelectionRange(textarea.value.split('\n').slice(0, rowIndex).join('\n').length, 0);
        const range = document.getSelection().getRangeAt(0);
        const rect = range.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();

        const errorDot = document.createElement('div');
        errorDot.classList.add('error-dot');
        // 计算红点相对于容器的top值
        errorDot.style.top = `${rect.top - containerRect.top + rect.height / 2}px`;
        container.appendChild(errorDot);
      });

      // 输出结果
      outputDiv.innerHTML = `<h2>逗号计数检查完成，共发现 ${errorRows.length} 行异常</h2>`;
    }
  </script>
</body>
</html>

关键改进点 #

• 用textarea-container作为相对定位容器，确保红点相对于文本域精准对齐
• 利用选区API获取每行的精确坐标，避免行高计算误差
• 修正预期逗号数逻辑：统计所有行的逗号数频率，取多数行的数值作为标准
• 每次检查前清除历史红点，避免重复标记
• 给文本域添加左侧padding，防止红点遮挡文本

测试示例 #

输入以下内容：

Kakamega,Kitui,Arusha
20,30,35
31,44,76
45,28
67,89,109

点击按钮后，倒数第二行左侧会出现红色圆点，精准对齐该行文本。

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