js 如何匹配以下正则字符串?

Question

var code = `
<template>
  {{hi}}
  <el-button type="primary" @click="showMsg">主要按钮1</el-button>  
</template>


<script>
   new     Vue    (

{
  data(){
    return {
      hi:'666'
    }
  },
  mounted(){
    console.log('mounted')
  },
  methods:{
    showMsg(){
      console.log('this',)
      this.$Router.push('/v-edit')
    }
  }
            }

)
</script>`

我想要匹配的内容是(注意要兼容 new Vue 的前后空格和 最后的 }) 前后空格 以及{ } 的换行操作)

{
  data(){
    return {
      hi:'666'
    }
  },
  mounted(){
    console.log('mounted')
  },
  methods:{
    showMsg(){
      console.log('this',)
      this.$Router.push('/v-edit')
    }
  }
            }

Answer 1

var result = code.match(/\s*new\s+Vue\s*\((\{.+\})\)/s)[1]

匹配换行符

var result = code.match(/\s*new\s+Vue\s*\(\s*(\{.+\})\s*\)/s)

Answer 2

如果要兼容 vue 的所有语法，应该用 vue 解析器，可以用 vue3 的 vue/compiler-sfc 模块解析 SFC(单文件组件)，把 js 代码转 AST(抽象语法树)，然后查找想要的结点，获取结点 start 和 end 定位源代码位置

参考代码：

import { parse, compileScript } from 'vue/compiler-sfc'

/**
 * 获取 new Vue({...}) 语句中第一个参数的代码 '{...}'
 */
const getNewVueOptions = source => {
  const { content, scriptAst } = compileScript(parse(source, { sourceMap: false }).descriptor, { id: 'app' })
  const node = scriptAst.find(({ expression }) => expression?.type === 'NewExpression' && expression?.callee?.name === 'Vue')?.expression.arguments[0]
  return node ? content.slice(node.start, node.end) : ''
}

console.log(getNewVueOptions(`
<template>
  {{hi}}
  <el-button type="primary" @click="showMsg">主要按钮1</el-button>  
</template>


<script>
   new     Vue    (

{
  data(){
    return {
      hi:'666'
    }
  },
  mounted(){
    console.log('mounted')
  },
  methods:{
    showMsg(){
      console.log('this',)
      this.$Router.push('/v-edit')
    }
  }
            }

)
</script>`))

封装了查找函数的 Demo (Sandbox): https://codesandbox.io/s/sfc-...