在 Vue中实现检索文本高亮功能

顾辰呀

于 2024-05-28 10:44:59 发布

阅读量327

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45776545/article/details/139260109

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Text Highlight Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model="searchTerm" placeholder="Enter search term">
        <button @click="highlightText">Search</button>

        <div v-html="highlightedContent"></div>
    </div>

    <!-- 引入 Vue.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchTerm: '',
                content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec libero at mi vestibulum vehicula. Curabitur bibendum est vel orci bibendum, a egestas orci fermentum. Nullam a lectus urna. Duis euismod libero in nulla dignissim, id aliquet est consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut lacinia ex sed justo sollicitudin, ut vehicula libero dignissim.`
            },
            computed: {
                highlightedContent() {
                    if (!this.searchTerm) {
                        return this.content;
                    }
                    const regex = new RegExp(`(${this.searchTerm})`, 'gi');
                    return this.content.replace(regex, '<span class="highlight">$1</span>');
                }
            },
            methods: {
                highlightText() {
                    // 该方法是为了被按钮调用，实际逻辑在 computed 属性中处理
                }
            }
        });
    </script>
</body>
</html>