正则表达式 || 遇到字符串里面有（）就在括号后面换行

Miraitowa_chole

于 2024-03-08 21:00:00 发布

阅读量450

点赞数 1

分类专栏： vue专栏 web（pc端）文章标签： vue.js javascript 前端 elementui 前端框架正则表达式

本文链接：https://blog.csdn.net/ZHENGCHUNJUN/article/details/136563864

版权

vue专栏同时被 2 个专栏收录

53 篇文章

订阅专栏

web（pc端）

7 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用ElementPlus组件的点击事件，结合正则表达式实现HTML内容中特定模式（如（...））后的自动换行。展示了数据绑定和字符串操作在模板中的实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<template>
    <div class="vertical-layout">
        <header>
            <h1>testPage</h1>
            <p>(1)第一行内容xxxxxxxxx（2）第二行内容xxxxxxx(3)第三行内容</p>
        </header>
        <main>
            <el-button @click="goToOtherPage">点击换行</el-button>
            <p v-html="content"> </p>
        </main>
        <footer>
            <p>Footer content goes here.</p>
        </footer>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 引入 Element Plus 组件
import { ElButton } from 'element-plus';
const data = ref('(1)第一行内容xxxxxxxxx（2）第二行内容xxxxxxx（3）第三行内容');
const content = ref('');
const goToOtherPage = () => {
    //正则表达式 遇到字符串里面有（） 就在括号后面换行
    content.value = data.value.replace(/（(\d+）)/g, match => `<br>${match}`)
};
</script>
<style scoped>
</style>