vue实现搜索文字高亮

前端小趴菜05

已于 2024-03-05 09:42:06 修改

阅读量1k

点赞数 9

文章标签： vue.js javascript 前端

于 2024-01-24 17:40:33 首次发布

本文链接：https://blog.csdn.net/m0_68716504/article/details/135827897

版权

在日常项目中我们往往会有搜索高亮的需求，下面方法可帮助我们实现，可能不是最优但是可以解决

代码实现

<template>
    <div>
        <el-input v-model="searchText" placeholder="Type a word to highlight" @input="changeinput"/>
        <div v-html="dataval"></div>
    </div>
</template>

<script setup lang="ts">
import { ref ,watchEffect} from 'vue'
const searchText = ref('')
const data = ref('在上面的例子中，我们将输入框中输入的值绑定到 searchText 变量上，然后将 searchText 和样例文本 sampleText 传递给 WordHighlighter 组件即可。当用户在输入框中输入文本时，WordHighlighter 组件会自动更新高亮的文本内容。注意：WordHighlighter 组件默认只会高亮第一个匹配项，如果需要高亮所有匹配项，可以设置 global 属性为 true。完整的示例代码如下：')
const dataval = ref('')
const changeinput = (val:any) => {
    if (val) {
        const reg = new RegExp(val, 'ig') //正则匹配
        dataval.value = data.value.replace(reg,  (match)=> {  //替换对应字符
            return `<span style="color:red">${match}</span>`
        })
    } else {
        dataval.value = data.value
    }
    
}
//监听使dataval 等于data
watchEffect(() => {
    dataval.value = data.value
})


</script>

<style lang="scss" scoped>

</style>

效果

原生js实现

<!DOCTYPE html>
<html>

<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <input type="text" id="searchInput" placeholder="Search">
    <p id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac metus
        ac risus lacinia malesuada. Curabitur eget mi euismod, tincidunt lacus
        nec, sodales lectus. Sed vitae mi at sem tristique varius. Nulla facilisi.
        Phasellus sed justo magna. Sed ullamcorper enim vitae lectus vehicula,
        sit amet mollis libero lacinia. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Sed auctor, urna a facilisis
        tristique, lacus sem lacinia ex, et efficitur mi eros sit amet metus.
    </p>
    <script>
        function highlightText(searchTerm) {
            const contentElement = document.getElementById('content');
            const content = contentElement.textContent;
            const regex = new RegExp(searchTerm, 'gi');
            const highlightedContent = content.replace(regex, match => `<span class="highlight">${match}</span>`);
            contentElement.innerHTML = highlightedContent;
        }
        const searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function () {
            console.log(this.value.trim());
            const searchTerm = this.value.trim();
            highlightText(searchTerm);
        });
    </script>
</body>

</html>