如何对html任意选中区域脱敏（js原生实现）

一、思路

1.获取点击区域

2.判断当前所选区域是否跨标签

3.对跨标签的情况，需要遍历所有子节点， 从选中的开始标签到结束标签中的所有dom进行脱敏处理

二、代码

**
 * 脱敏按钮点击
 */
tm() {
    this.isStart = false;
    //获取选中区域
    let range = window.getSelection().getRangeAt(0);
    let startOffset = range.startOffset;
    let endOffset = range.endOffset;
    //选中区域的开始和结束节点不是同一个标签，则需要找到所有跨越的标签进行脱敏
    if (range.startContainer != range.endContainer) {
        //获取选中区域所属dom
        let obox = range.commonAncestorContainer;
        this.getAllChildNodes(range, obox);
    } else {
        //获取选中区域所属节点dom
        let parElem = document.getSelection().anchorNode.parentElement;
        parElem.innerHTML = this.mask(parElem.innerHTML, startOffset, endOffset);
    }
    this.addTm(1);
},

/**
 * 递归找到子节点就脱敏
 * @param range
 * @param obox
 */
getAllChildNodes(range, obox) {
    let nodes = obox.getElementsByTagName("*");
    for (let i = 0; i < nodes.length; i++) {
        let item = nodes[i];
        let itemNodes = item.getElementsByTagName("*");
        if (itemNodes && itemNodes.length > 0) {
            //不是子节点继续递归
            this.getAllChildNodes(range, item);
        } else {
            this.childTm(range, item);
        }
    }
},

/**
 * 脱敏子节点
 * @param range
 * @param item
 */
childTm(range, item) {
    let startOffset = range.startOffset;
    let endOffset = range.endOffset;
    //找到选中的开始子节点，标志开始脱敏
    if (item == range.startContainer || item == range.startContainer.parentNode) {
        this.isStart = true;
        item.innerHTML = this.mask(item.innerHTML, startOffset, item.innerHTML.length);
    //找到选中的结束子节点，标志结束脱敏
    } else if (item == range.endContainer || item == range.endContainer.parentNode) {
        this.isStart = false;
        item.innerHTML = this.mask(item.innerHTML, 0, endOffset);
    //开始脱敏后的中间节点需全部脱敏
    } else if (this.isStart) {
        item.innerHTML = this.mask(item.innerHTML, 0, item.innerHTML.length);
    }
},

 /**
 * 替换字符串中指定范围字符
 * @param str 要替换的字符串
 * @param begin 替换起始位置
 * @param end 替换结束位置
 * @returns {string|*}
 */
mask(str, begin, end) {
    let result = str;
    //循环替换所有的符号空格
    while (result.indexOf("&nbsp;") > -1) {
        result = result.replace("&nbsp;", " ");
    }
    //字符串中仅空格不进行替换
    if(result.match(/^[ ]*$/)) {
        return str;
    }
    for (let i = begin; i < end; i++) {
        //替换所有不是空格的字符
        if (result.charAt(i) != ' ') {
            result = result.substr(0, i) + '*' + result.substr(i + 1);
        }
    }
    return result;
},

/**
 * 向后台提交脱敏文件
 */
addTm(falg) {
    var _this = this;
    let tmhWj = document.getElementById('tmwj').innerHTML;
},