vue实现一键复制的功能,去掉html标签

今天的业务需要有个按钮进行复制文本的需求

首先封装了

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$baseMessage('复制成功', 'success')
}

function clipboardError() {
  Vue.prototype.$baseMessage('复制失败', 'error')
}

//过滤html标签
function filter(html) {
  return html
    .replace(/<(?:.|\n)*?>/gm, '')
    .replace(/(&rdquo;)/g, '"')
    .replace(/&ldquo;/g, '"')
    .replace(/&mdash;/g, '-')
    .replace(/&nbsp;/g, '')
    .replace(/&gt;/g, '>')
    .replace(/&lt;/g, '<')
    .replace(/<[\w\s"':=\/]*/, '')
}
/**
 * @description 复制数据
 * @param text
 * @param event
 */
export default function handleClipboard(text, event) {
  console.log(text, 'e.text')
  text = filter(text)  //过滤掉html，再返回数据
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

vue代码部分

<el-tab-pane
          v-for="(value, key) in preview.data"
          :key="key"
          :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
          :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))"
        >
          <pre><code class="hljs"  v-html="highlightedCode(value, key)"></code></pre>
          <el-button
            style="position:absolute;right:10px;top:20px;"
            type="primary"
            class="copy-code-button"
            :data-clipboard-text="highlightedCode(value, key)"
            @click="copyClick(highlightedCode(value, key), $event)"
          >
            一键复制代码
          </el-button>
        </el-tab-pane>

• 实现的效果
  英文数据是动态渲染出来的，里面含有html标签，我们的粘贴内容是不要html标签的，所以需要我们过滤掉