关于划字逻辑的文档

关于划字逻辑的文档

背景：

• 左侧文章滑动需关联右侧问题，右侧点击左侧定位(左右交互的时候都需要加样式)
  代码实现方法：

//第一步：二级事件监听
  componentDidMount() {
    //根据id获取文章详情页
    this.left.current &&
      this.left.current.addEventListener("click", (e) => {
        this.setState(
          {
            BtnLoc: { btnX: e.clientX, btnY: e.clientY }, //该坐标监听的时鼠标点击结束时的坐标
          },
          () => console.log(this.state.BtnLoc)
        );
        document.onselectionchange = this.OnChange();    //使用onselectionchange绑定onChange()事件
      });
  }
//第二步：监听复制的内容，且取到第一个字和最后一个字的偏移量
 OnChange = () => {
    var selObj = document.getSelection();
    var selectedText = selObj.toString(); //获取文字
    var range = document.getSelection().getRangeAt(0)//获取选中文字的偏移量
    var start = range.startOffset //开始的偏移量
    var end = range.endOffset //结束的偏移量
   }
 //第三步：根据绑定某个列表的索引值来添加具有唯一id的<span>标签
  addHtml = (item:any,index:any) => { //选中时传过来的索引和内容
    const {offsetStart,offsetEnd}=item
    var allContent = this.left.current.innerText//ref获取内容
    var pre = allContent.substr(0, offsetStart) //根据起始和结束偏移量一分为三 
    var text = allContent.substr(offsetStart, offsetEnd - offsetStart);
    var post = allContent.substr(offsetEnd);
    this.left.current.innerHTML = pre + `<span id=mrc${index}>` + text + '</span>' + post  //添加标签
    this.scrollIntoView(index)	//滑动
    setTimeout(() => {
      this.removeHtml(pre,text,post)  //滑动结束取消标签，使用添加标签截取的三段内容还原
    }, 3000);
  }
  //scroll滑动方法,顺便添加样式
  scrollIntoView = (id:any) => { //获取到唯一id的span添加样式和滑动
    var ele = document.getElementById(`mrc${id}`)
    ele.style.backgroundColor='#fffbf1'
    ele.style.borderBottom='solid 2px #ff0019'
    ele.scrollIntoView({ behavior: "smooth", block: "start" })
  };

API必备：

• Document: selectionchange event
  https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event
• Element.scrollIntoView()
  https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

参考文档：

• js获取选中文本的第一个字及最后一个字的偏移量
  https://blog.csdn.net/weixin_44817180/article/details/105070936
• JavaScript为文本框内选中文字添加标签
  https://blog.csdn.net/weixin_30337157/article/details/99771925