vue 替换换行符为p标签

最新推荐文章于 2024-09-19 10:53:28 发布

Dreamer_xr

最新推荐文章于 2024-09-19 10:53:28 发布

阅读量6.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 原生JavaScript 文章标签：换行符转p标签

本文链接：https://blog.youkuaiyun.com/xr510002594/article/details/92797721

Vue 同时被 2 个专栏收录

44 篇文章

订阅专栏

原生JavaScript

13 篇文章

订阅专栏

本文介绍如何在Vue中利用正则表达式将文本中的换行符替换为<p>标签，以实现首行缩进的效果。提供了一个代码示例作为实现方法。

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

效果图

需要把换行符替换成p标签，方便首行缩进。主要方法使用正则进行转义

 this.articleData = '<p>' + content.replace(/\n*$/g, '').replace(/\n/g, '</p> <p>') + '</p>'

代码示例：

<template>
<main>
    <pre v-html="this.articleData" v-if="show"></pre>
    <div class="page_">
    <input type="submit" value="上一页">
    <input type="submit" value="下一页" @click="nextPage()">
    </div>
</main>
</template>


<sctipt>
// 获取文章内容
getArticle() {
this.$ajax.get(this.$novel_url + 'article', {
    params: {
    link: this.link,
    n: this.page,
    id: this.$route.query.id
    }
}).then(data => {
    let content = data.data.chapter.body;
    this.articleData = '<p>' + content.replace(/\n*$/g, '').replace(/\n/g, '</p> <p>') + '</p>'
    this.show = true;
    this.ToastClear()
})
},
</script>

<style lang='less' scoped>
  main {
    padding: 0 10px;
    margin-top: 50px;
    text-align: left;
    // line-height: 34px;
    font-size: 16px;
    width: calc(100% - 20px);

    pre {
      width: 100% !important;
      text-indent: 2em;
      text-align: left;
      line-height: 34px;
      white-space: inherit;
      color: #2c3e50;

      p {
        line-height: 34px;
      }

    }
    .page_{
        width: 170px;
        display: block;
        margin: 15px auto;
        input{
            width: 80px;
            background: #fff;
        }
    }


  }
</style>