通过vue和elementui实现查找多关键词高亮

最新推荐文章于 2024-03-28 14:38:37 发布

淮滨爱奖励有限公司王总

最新推荐文章于 2024-03-28 14:38:37 发布

阅读量278

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_51616500/article/details/133876940

版权

我没有搭建vue框架直接创建个HTML写的，如果需要搭框架可以看我之前的视频。话不多说上代码

首先引入需要的包

<head>
    <meta charset="UTF-8">

    <title>关键词高亮</title>
    <!--引入vue的js-->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!--引入elementui的js前必须引入vue的js-->
    <script type="text/javascript" src="./js/index.js"></script>
    <!--引入axios的js-->
    <script type="text/javascript" src="./js/axios.min.js"></script>
    <!--引入elemengtui的css样式-->
    <link type="text/css" rel="stylesheet" href="./css/index.css"/>
</head>

然后是代码主体

<body>
<div id="app">
    <h1>文章查询与高亮显示示例</h1>

    <el-input type="textarea":rows="7" v-model="article" placeholder="输入文章" class="input"></el-input>
    <el-input type="textarea":rows="7" v-model="keywords" placeholder="关键词" class="input"></el-input>
    <el-input type="textarea":rows="7" v-model="excludeKeywords" placeholder="排除关键词" class="input"></el-input>
    <el-button @click="highlightKeywords" type="primary">查询并高亮</el-button>

    <div v-html="highlightedArticle"></div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            article: '',
            keywords: '',
            excludeKeywords: ''
        },
        computed: {
            highlightedArticle() {
                let highlightedText = this.article;
                const keywordArray = this.keywords.split(/[，,\s]+/); // 用逗号或空格分割关键词
                const excludeKeywordArray = this.excludeKeywords.split(/[，,\s]+/); /*// 用逗号或空格分割排除关键词*/
                keywordArray.forEach(keyword => {
                    if (keyword.trim() !== '') {
                        const pattern = new RegExp(keyword.trim(), 'gi');
                        highlightedText = highlightedText.replace(pattern, match => `<span class="highlightRed">${match}</span>`);
                    }
                });
                excludeKeywordArray.forEach(excludeKeyword => {
                    if (excludeKeyword.trim() !== '') {
                        const pattern = new RegExp(excludeKeyword.trim(), 'gi');
                        highlightedText = highlightedText.replace(pattern, match => `<span class="highlightYellow">${match}</span>`);
                    }
                });
                return highlightedText;
            }
        },
        methods: {
            highlightKeywords() {

            }
        }
    });
</script>
<style>
    .input {
        width: 100%;
        margin: 10px 0;
    }

    .highlightRed {
        background-color: red;
    }
    .highlightYellow {
        background-color: yellow;
    }
</style>

运行结果