点击div中字符串文本框textarea对应字符串位置高亮

• 简易标签:

  <TextArea
                    key={'txt' + ix}
                    value={originCurTextareaStr}
                    style={{width: 500}}
                    rows={25}
                    autoSize={false}
                  />
                <Button
                  onClick={() => {
                    clickTestBtn(ix);
                  }}
                >
                  TEST
                </Button>
<div
                    style={{
                      width: 500,
                      minWidth: 500,
                      maxWidth: 500,
                      height: textBoxHeight,
                      border: '1px solid #333',
                      borderRadius: 4,
                      marginLeft: 4,
                      padding: '5px 11px',
                      letterSpacing: 0,
                      overflow: 'auto',
                      boxSizing: 'border-box'
                    }}
                    id={`text-area-snap-${ix}`}
                    dangerouslySetInnerHTML={{
                      __html: get(textObj, [`txt${ix}`]) || ''
                    }}
                    onClick={e => clickTestDiv(e, `txt${ix}`)}
                  ></div>

• 点击test按钮:

const clickTestBtn = ix => {
    const id = 'txt' + ix;
    // 去掉\r更容易判断换行后的数据
    let originCurTextareaStr: string = (form.getFieldValue(id) || '').replace(/\r/g, '');
    let arr: any[] = originCurTextareaStr.match(/[^\n]+(\n){1}|(\n){1}|[^\n]+/g) || [];
    const originFieldStrArr: any[] = originCurTextareaStr.match(/[^\n]+(\n){1}|(\n){1}|[^\n]+/g) || [];
    const textFieldArr = JSON.parse(JSON.stringify(arr)) || [];
    const failResultList2: any[] = [ // 此处应该通过接口获取这个数据!!这里为了展示需要的数据格式与本地mock数据
      [10, [1, 2, 3, 4]], // 第10行从左向右数第1到4的字符串
      [11, [1, 4, 7]], // 第11行从左向右数第1，4，7的字符串
      [14, [1, 2, 7]], // 第14行从左向右数第1，2，7的字符串
    ]
    _.each(failResultList2, idxArr => {
      if (idxArr.length === 2) {
        for (let index in arr) {
          // 因为给后端的换行符传的是\r\n,所以这里要还原,保证数据不会出错
          let currentTextFieldArr: any = (textFieldArr[index] || '')
            .replace(/\n/g, str => '\r\n'.repeat(str.length))
            .split('');
          const item: any[] = textFieldArr[index].split('');
          if (idxArr[0] > 0 && Number(index) === idxArr[0] - 1) {
            const idxArrTwo = idxArr[1] || []; // 第几行第几个字符串
            if (isArrayLengthMoreThanZero(idxArrTwo)) {
              for (let arrIdx of idxArrTwo) {
                const spanStrIdx = Number(arrIdx) - 1;
                currentTextFieldArr[spanStrIdx] = getRedSpan({
                  arr: originFieldStrArr,
                  index,
                  item,
                  strIdx: spanStrIdx,
                  str: get(item, [spanStrIdx])
                });
              }
              arr[index] = currentTextFieldArr.join('');
            }
          }
        }
      }
    });
    // textarea给选定文本范围高亮是根据下标算的, \r\n被当成\n(一个字符串)了, 而前端做下标判断的时候是当成2个字符串的, 导致高亮失误=>所以要去掉\r
    originCurTextareaStr = String(arr.join('').replace(/\r/g, ''));
    let text = getDivDom(originCurTextareaStr, ix);
    setTextObj({
      ...textObj,
      [id]: text
    });
  };

•   根据传入的行的下标, 找到该行最后一个字符串距离textarea的第一个字符串总共的length

 const getStrSumLen = (arr: string[] = [], index: number | string) => {
    let sum: number = 0;
    for (let i in arr) {
      if (Number(i) <= Number(index)) {
        sum += get(arr[i], 'length') || 0;
      } else {
        break;
      }
    }
    return sum;
  };

•   找到textarea的具体某段字符串高亮 

const triggerTextRange = (startPos: number, endPos: number, id: string) => {
    const ta1: any = document.getElementById(id) || {};
    ta1.focus && ta1.focus();
    ta1.setSelectionRange && ta1.setSelectionRange(startPos, endPos);
  };

•   点击检测结果box=>利用冒泡原理可以找到下面的每个子标签,根据里面的自主属性找到左侧电文条款编辑区textarea的对应字符串高亮 

const clickTestDiv = (e: any, id) => {
    const dom: any = e.target || {};
    if (dom.getAttribute) {
      const startPos: number = Number(dom.getAttribute('data-mouse-start-index'));
      const endPos: number = Number(dom.getAttribute('data-mouse-end-index'));
      triggerTextRange(startPos, endPos, id);
    }
  };

•   后端接口返回下标数组, 从而找到对应字符串一个一个地标红

const getRedSpan = ({ index, arr, item, str, strIdx }) => {
    const endIdx = getStrSumLen(arr, index);
    const startIdx = endIdx - item.length;
    const currentStartIdx = startIdx + strIdx;
    const currentEndIdx = currentStartIdx + 1;
    return `<span style="color:red;" data-row="${index}" data-mouse-start-index="${currentStartIdx}" data-mouse-end-index="${currentEndIdx}">${str}</span>`;
  };

•   右侧检验结果box需要的标签字符串

const getDivDom = (originCurTextareaStr: string, ix) => {
    const id = 'txt' + ix;
    const textField: any = document.getElementById(id) || {};
    let originFieldStr: string = (form.getFieldValue(id) || '').replace(/\r/g, '');
    let originFieldStrArr: any[] = originFieldStr.match(/[^\n]+(\n){1}|(\n){1}|[^\n]+/g) || [];

    const textScrollHeight: number = textField?.scrollHeight || 0;
// 宽度请根据自己实际情况调整
    let letterPreWidth: string = '385px';
    if (textScrollHeight > textBoxHeight) {
      letterPreWidth = '368px';
    }
    originCurTextareaStr = originCurTextareaStr.replace(/\r/g, '');
    let arr = originCurTextareaStr.match(/[^\n]+(\n){1}|(\n){1}|[^\n]+/g) || [];
    let strArr: any = [];
    const letterStyle: string = `flex:0 0 ${letterPreWidth};min-width:${letterPreWidth};max-width:${letterPreWidth};overflow-x:hidden;white-space: pre-wrap;word-wrap: normal;word-break: break-all;letter-spacing:0px;word-spacing:0;line-height: 22px;min-height: 22px;padding: 0;margin-bottom: 0;font-family: MicrosoftYaHei;font-size: 14px;color: #333;`;
    const rowStyle =
      'flex:0 0 80px;width:80px;margin-bottom: 0;padding:0;line-height: 22px;min-height: 22px;font-size: 12px;color:#bbb;';
    const rowWrapper = 'display:flex;margin:0;padding:0;';
    if (arr.length > 0) {
      _.each(arr, (item: any, index) => {
        const originStrItem = get(originFieldStrArr, [index]) || '';
        const endIdx = getStrSumLen(originFieldStrArr, index);
        const originStrItemLen = originStrItem.length;
        const startIdx = endIdx - originStrItemLen;
        strArr[index] = `<div style="${rowWrapper}"><p style="${rowStyle}" data-row="${index}"
        data-len="${originStrItemLen}"
        data-mouse-start-index="${startIdx}"
        data-mouse-end-index="${endIdx}">第${index + 1}行</p ><pre
          style="${letterStyle}" 
          data-row="${index}"
          data-len="${originStrItemLen}"
          data-mouse-start-index="${startIdx}"
          data-mouse-end-index="${endIdx}"
          >${item}</pre></div>`;
      });
    }
    return strArr.join('');
  };