百度【高亮截取显示】几行代码就搞定

1.需求描述：

根据根据关键字高亮显示数据，并且显示高亮位置部分文字
2.效果展示

2.1初始化效果

2.2输入关键字

3.源代码奉上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        const context = {
            text: `前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，
HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。`}
        var dataText = [
            context, context, context, context, context,
            context, context, context, context, context,
        ]
    </script>
    <style>
        * {
            text-align: center;
        }

        .content>div {
            margin: 20px auto;
            text-align: left;
            border: 1px dashed #ccc;
        }
    </style>
</head>

<body>
    <input type="text" id="text" placeholder="请输入关键字" />
    <input type="button" id="button" value="确定" />
    <div id="content" class="content">
    </div>
    <script>
        var contents = document.getElementById("content");
        var text = document.getElementById("text");
        var button = document.getElementById("button");
        getRedHtml('展示的元素进行')
        button.onclick = function () {
            var value = text.value;
            getRedHtml(value)
        };

        function getRedHtml(value) {
            contents.innerHTML = dataText.map((one, index) => {
                //开始文字位置
                const startIndex = one.text.indexOf(value) - 10
                //结束文字位置
                const endIndex = startIndex + value.length + 50
                //截取文字
                const subStringText = one.text.substring(startIndex, endIndex)
                //根据文字分解字符串
                const redValues = subStringText.split(value);
                //拼接字符串打印页面
                const innerHTMLRed = redValues.join('<span style="color:red;">' + value + '</span>');
                return `<div style="height:50px;padding:10px;width:600px">${innerHTMLRed}. . .</div>`
            }).join('')
        }

    </script>
</body>

</html>