SOURCE

var app = new Vue({
  el: '#app',
  data: {
    lrc: ""
  },
  methods: {
      run() {
        let lrc = this.lrc;
        this.lrc = lrc.split('\n').map((lrcItem) => {
            return lrcItem.replace(/^\[.*\]/,'*')
        })
      }
  }
})






// lrc
/*


[by:壹枚白羊男]
[ti:牧马城市 (《老男孩》电视剧片尾曲)]
[ar:毛不易]
[al:牧马城市]
[by:]
[offset:0]
[00:00.000] 作曲 : 谭旋
[00:00.008] 作词 : 段思思
[00:00.24]牧马城市 (《老男孩》电视剧片尾曲) - 毛不易
[00:01.71]词：段思思
[00:02.40]曲：谭旋
[00:02.55]编曲：蔡科俊
[00:02.77]制作人：谭旋
[00:02.99]吉他：蔡科俊
[00:03.21]贝斯：蔡科俊
[00:03.43]弦乐：国际首席爱乐乐团
[00:03.83]录音：谭旋
[00:04.02]混音：周天澈
[00:04.24]和声：曾缔
[00:04.42]录音棚：谭旋音乐工作室
[00:04.83]出品：上海谭旋音乐工作室
[00:05.46]
[00:31.66]游历在大街和楼房
[00:34.57]心中是骏马和猎场
[00:37.67]最了不起的脆弱迷惘
[00:41.08]不过就这样
[00:43.65]
[00:44.34]天外有天有无常
[00:47.30]山外有山有他乡
[00:50.41]跌了撞了 心还是回老地方
[00:54.95]
[00:56.87]游离于城市的痛痒
[00:59.79]错过了心爱的姑娘
[01:02.92]宣告世界的那个理想
[01:06.27]已不知去向
[01:09.36]为所欲为是轻狂
[01:12.33]防不胜防是悲伤
[01:15.65]后来才把成熟当偏方
[01:20.40]
[01:21.57]当所有想的说的要的爱的
[01:25.17]都挤在心脏
[01:27.68]
[01:28.39]行李箱里装不下我 想去的远方
[01:33.99]
[01:34.53]这来的去的给的欠的 算一种褒奖
[01:40.06]
[01:40.74]风吹草低见惆怅 抬头至少还有光
[01:45.90]
[02:12.67]游历在大街和楼房
[02:15.58]心中是骏马和猎场
[02:18.77]最了不起的脆弱迷惘
[02:22.11]不过就这样
[02:24.99]天外有天有无常
[02:28.19]山外有山有他乡
[02:31.49]跌了撞了 心还是回老地方
[02:36.21]
[02:37.88]游离于城市的痛痒
[02:40.85]错过了心爱的姑娘
[02:44.03]宣告世界的那个理想
[02:47.34]已不知去向
[02:49.80]
[02:50.57]为所欲为是轻狂
[02:53.60]防不胜防是悲伤
[02:56.79]后来才把成熟当偏方
[03:01.94]
[03:02.60]当所有想的说的要的爱的
[03:06.32]都挤在心脏
[03:08.75]
[03:09.33]行李箱里装不下我 想去的远方
[03:15.01]
[03:15.61]这来的去的给的欠的算一种褒奖
[03:21.76]风吹草低见惆怅
[03:23.52]抬头至少还有光
[03:27.05]
[03:27.84]把烦恼痛了吞了认了算了
[03:31.46]不对别人讲
[03:34.03]
[03:34.62]谁还没有辜负几段 昂贵的时光
[03:40.24]
[03:40.85]若男孩笑了哭了累了
[03:44.17]说要去流浪
[03:47.04]留下大人的模样
[03:48.88]看岁月剑拔弩张
[03:52.02]
[03:53.57]总会有个人成为你的远方



*/

<div id="app">
    <div class="layout">
        <div class="mobile">
        </div>
        <div class="lrc">
            <textarea class="lrc-text" v-model="lrc">
            </textarea>
            <button class="lrc-btn" @click="run">导入</button>
        </div>
    </div>

</div>

*{
    margin: 0;
    padding: 0;
}
.layout{
    display: flex;
}
.mobile, .lrc{
    position: relative;
    width: 375px;
    height: 667px;
    box-sizing: border-box;
}
.mobile{
    background-color: #fff;
    transform-origin: left top;
}
.lrc{
    display: flex;
    flex-direction: column;
}
.lrc .lrc-text{
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    box-sizing: border-box;
    padding: 16px 16px 46px 16px;
    background-color: #f5f5f5;
}
.lrc .lrc-btn{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 36px; 
}