如何获取含HTML标签字符串中160字符后标签外的有效索引位置？

原始字符串 #

<span class="badge bg-teal black bg-lighten-4">2023-03-29 15:37:34 (Admin): </span>
he like to visit today call back him 5.30pm for confirmation. <br/>
<span class="badge bg-teal black bg-lighten-4">2023-03-29 15:37:34 (An): </span>
he will come for visit. <br/>

需求 #

在上述HTML字符串中，找到索引160之后的第一个位置，该位置需满足：

• 不在 <span>...</span> 标签的内部（包括标签本身及其中的内容）
• 不在 <br> 标签的内部

现有实现问题 #

你当前的代码存在以下逻辑错误：

• 字符串截取方法误用：substring(i,7) 是取索引i到7的字符，而非从i开始取7个字符，应使用substr(i,7)
• 循环变量混乱：第二个循环初始化了j，但递增的是i，导致逻辑异常
• 未正确处理标签的完整区间，无法准确判断位置是否在标签内部

改进后的代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="string" style="display:none;">
  <span class="badge bg-teal black bg-lighten-4">2023-03-29 15:37:34 (Admin): </span>
  he like to visit today call back him 5.30pm for confirmation. <br/>
  <span class="badge bg-teal black bg-lighten-4">2023-03-29 15:37:34 (An): </span>
  he will come for visit.  <br/>
</div>

JavaScript部分 #

const string = $('.string').html().toString();
let pos = 160;
const len = string.length;

// 辅助函数：判断当前位置是否在目标标签内部或span包裹的内容中
function isInsideTargetArea(currentPos) {
  let inSpan = false;
  // 遍历到当前位置，跟踪标签状态
  for (let i = 0; i < currentPos; i++) {
    // 匹配<span起始标签
    if (string.substr(i, 5) === '<span') {
      inSpan = true;
      // 跳过整个起始标签到>
      while (i < len && string[i] !== '>') i++;
    }
    // 匹配</span结束标签
    else if (string.substr(i, 7) === '</span') {
      // 跳过整个结束标签
      i += 6;
      inSpan = false;
    }
    // 匹配<br标签
    else if (string.substr(i, 3) === '<br') {
      const tagEnd = string.indexOf('>', i);
      // 如果当前位置在br标签范围内，返回true
      if (currentPos <= tagEnd) return true;
      // 跳过整个br标签
      i = tagEnd;
    }
  }
  // 返回是否处于span包裹的内容中
  return inSpan;
}

// 从索引160开始查找符合条件的位置
while (pos < len) {
  if (!isInsideTargetArea(pos)) {
    break;
  }
  pos++;
}

console.log('目标位置索引：', pos);

代码说明 #

1. 状态跟踪：通过遍历字符串实时跟踪<span>标签的开闭状态，准确判断当前位置是否处于span包裹的内容中
2. 标签区间跳过：遇到<br>或<span>标签时，直接定位到标签结束位置，避免误判标签内部的字符位置
3. 逐位校验：从索引160开始逐位检查，直到找到第一个不在目标标签区域内的位置

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