React | JavaScript根据索引让个别字体高亮显示

桃扇骨 2021-09-21 11:54 256阅读 0赞

### 根据索引让文字高亮 ###

*   *  在React中使用效果图
     *  在html中使用效果图

## 在React中使用效果图 ##

![效果图][20200927143736432.png_pic_center]

/** * 补全字体坐标 * @param {*} valArray array [{ start: 2, end: 3 }] * @param {*} originStr string "xxxxx" */
    const completionArray = (valArray, originStr) => { 
        try { 
            if (!valArray.length) throw Error(`数据类型错误, valArray不是一个数组, valArray: ${ valArray}`);
            if (!originStr) throw Error(`数据类型错误, originStr不是一个字符串, originStr: ${ originStr}`);
    
            // 定义初始值
            let begin = {  start: 0, end: 0 };
            const arr = [];
    
            // 补齐数组值的连续性
            valArray.sort((a, b) => a.start - b.start)
            .forEach(item => { 
                if ((item.start + item.end) > 0) { 
                    const result = item.start - (begin.start + begin.end);
                    if (result > 0) { 
                        arr.push({  start: item.start - result, end: result })
                    }
    
                    begin = item;
                }
            });
    
            // 判断是否是初始值
            if (begin.start + begin.end) { 
                // 补尾数
                const txtLength = originStr.length;
                const endResult = txtLength - (begin.start + begin.end);
                if (endResult > 0) { 
                    arr.push({  start: txtLength - endResult, end: endResult })
                }
            }
    
            return valArray.concat(arr).sort((a, b) => a.start - b.start);
        } catch (error) { 
            console.log(error);
            return valArray;
        }
    };
    
    // 字体加红函数
    function colorText(txt) { 
        // return `<span style={ { color: 'red' }}>${txt}</span>`
        return <span key={ txt + Math.random()} style={ {  color: "red" }}>{ txt}</span>
    };
    
    // 要标红字体的索引
    const arrIndex = [
        { start: 1, txt: "8", end: 1},
        { start: 4, txt: "1", end: 1},
    ];
    
    // 原文
    const sourceString = "18/21";
    
    const resultFontString = completionArray(arrIndex, sourceString).map(item => { 
       // 判断是否需要标红
        if (item.txt) { 
            return colorText(sourceString.substr(item.start, item.end));
        }
    
        return sourceString.substr(item.start, item.end);
    })
    
    // 这个可以直接在react中使用
    resultFontString
    // 使用
    <div>{ resultFontString}</div>

## 在html中使用效果图 ##

![效果图][20200927144328666.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div style="width: 300px;margin: 30px auto; font-size: 30px;">
            <div style="margin-bottom: 12px;">原文: 18/21</div>
            <div>
                效果: <span id="box"></span>
            </div>
        </div>
        <script>
            /** * 补全字体坐标 * @param {*} valArray array [{ start: 2, end: 3 }] * @param {*} originStr string "xxxxx" */
            const completionArray = (valArray, originStr) => { 
                try { 
                    if (!valArray.length) throw Error(`数据类型错误, valArray不是一个数组, valArray: ${ valArray}`);
                    if (!originStr) throw Error(`数据类型错误, originStr不是一个字符串, originStr: ${ originStr}`);
    
                    // 定义初始值
                    let begin = {  start: 0, end: 0 };
                    const arr = [];
    
                    // 补齐数组值的连续性
                    valArray.sort((a, b) => a.start - b.start)
                    .forEach(item => { 
                        if ((item.start + item.end) > 0) { 
                            const result = item.start - (begin.start + begin.end);
                            if (result > 0) { 
                                arr.push({  start: item.start - result, end: result })
                            }
    
                            begin = item;
                        }
                    });
    
                    // 判断是否是初始值
                    if (begin.start + begin.end) { 
                        // 补尾数
                        const txtLength = originStr.length;
                        const endResult = txtLength - (begin.start + begin.end);
                        if (endResult > 0) { 
                            arr.push({  start: txtLength - endResult, end: endResult })
                        }
                    }
    
                    return valArray.concat(arr).sort((a, b) => a.start - b.start);
                } catch (error) { 
                    console.log(error);
                    return valArray;
                }
            };
    
            // 字体加红
            function colorText(txt) { 
                return `<span style="color: red;">${ txt}</span>`
                // return `<span style={ { color: 'red' }}>${txt}</span>`
                // return <span key={txt + Math.random()} style={ { color: "red" }}>{txt}</span>
            };
    
            // 要标红字体的索引
            const arrIndex = [
                { start: 1, txt: "8", end: 1},
                { start: 4, txt: "1", end: 1},
            ];
    
            // 原文
            const sourceString = "18/21";
    
            const box = document.getElementById("box");
            console.dir(box, 'box')
    
            var htmls = "";
            const resultFontString = completionArray(arrIndex, sourceString).map(item => { 
                // 判断是否需要标红
                if (item.txt) { 
                    htmls += colorText(sourceString.substr(item.start, item.end));
                    return colorText(sourceString.substr(item.start, item.end));
                }
    
                htmls += sourceString.substr(item.start, item.end);
                return sourceString.substr(item.start, item.end);
            })
    
            console.log(resultFontString, 'resultFontString')
            console.log(htmls, 'htmls')
            box.innerHTML = htmls
            
        </script>
    </body>
    </html>

[20200927143736432.png_pic_center]: /images/20210920/71c7b2ddea23438d957633b76e46c2cc.png
[20200927144328666.png_pic_center]: /images/20210920/81ff81aa15194b28b2525cc3a3ca3bf3.png