关于去掉富文本中的html标签和css样式的解决办法

王新新2255

已于 2022-10-19 13:35:27 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： css html 前端

于 2022-10-19 13:35:16 首次发布

本文链接：https://blog.csdn.net/m0_60336681/article/details/127406163

vue.js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在使用Element UI的el-table组件时，处理表格列中的富文本内容。当数据源包含HTML标签和样式时，通过自定义模板和正则表达式，可以剥离富文本中的HTML标签，仅保留内容。示例代码展示了如何利用`highlight`函数截取并替换掉HTML标签，确保表格内容简洁明了。

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

情况说明：el-table中表格列返回的数据是富文本内容，带有html标签和css样式，但是表格展示不需要这些，需要摘除。

解决方法：

<el-table-column prop="message" min-width="150" label="内容" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span>{{ highlight(scope.row.message) }}</span>
                  </template>
                </el-table-column>

截取富文本中的body部分，去除html标签

 highlight(item) {
      let relStyle = /<body[^>]*>([\s\S]*)<\/body>/
      if (item.search(relStyle) > 0) {
        let newHtml = relStyle.exec(item).toString()
        return newHtml.replace(/<[^>]+>/g, '')
      } else {
        return item
      }
    }