如何在</mark>与</span>标签间定位光标？Angular 5场景遇阻

我来帮你解决这个光标定位的问题！你遇到的情况很典型——当容器的最后一个子节点是<mark>元素时，常规的文本节点定位逻辑就失效了，因为没有可定位的文本节点。下面是针对Angular 5场景的解决方案：

核心思路 #

我们需要直接操作DOM的Range和Selection API，手动将光标定位到<mark>元素的后面、父<span>元素的内部末尾位置。

实现代码 #

假设你已经通过@ViewChild获取到了目标<span>的nativeElement，可以在组件中添加这个方法：

import { ElementRef, ViewChild, Component } from '@angular/core';

@Component({
  // 你的组件元数据（如selector、template等）
})
export class YourComponent {
  @ViewChild('targetSpan') targetSpan: ElementRef;

  setCursorBetweenMarkAndSpan() {
    const spanEl = this.targetSpan.nativeElement;
    const lastChild = spanEl.lastChild;

    // 检查最后一个子节点是否是mark元素
    if (lastChild 
        && lastChild.nodeType === Node.ELEMENT_NODE 
        && lastChild.tagName.toLowerCase() === 'mark') {
      
      // 创建Range对象，定位到mark元素之后
      const range = document.createRange();
      const selection = window.getSelection();

      // 设置范围的起始和结束位置都在mark元素的后面
      range.setStartAfter(lastChild);
      range.setEndAfter(lastChild);

      // 清除原有选中并应用新范围
      selection.removeAllRanges();
      selection.addRange(range);

      // 让span获取焦点，确保光标可见
      spanEl.focus();
    } else {
      // 这里保留你原来的逻辑，处理最后一个节点是文本节点的情况
      // 比如你之前的代码：
      // const textNode = spanEl.lastChild;
      // // 定位到文本节点末尾的逻辑...
    }
  }
}

代码说明 #

1. 节点类型判断：通过nodeType === Node.ELEMENT_NODE确认最后一个子节点是元素，再通过tagName.toLowerCase()判断是否为<mark>标签（避免大小写问题）。
2. Range定位：setStartAfter()和setEndAfter()方法可以精准地将光标放在目标元素的后面，而不会进入元素内部。
3. 焦点控制：最后调用spanEl.focus()确保容器获得焦点，光标能够正常显示。

这个方法可以完美解决最后一个节点是<mark>时的光标定位问题，和你原来的逻辑兼容，两种场景都能正常工作。

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