原生JS实现获取两个标签之间的内容，分离vue模板中的JS和HTML

版权声明：转载请注明出处，谢谢！ https://blog.csdn.net/dreamstone_xiaoqw/article/details/89341579

vue 相比原生JS，确实方便很多。
出于本菜的特定使用场景，vue 引入模板的方式并不适用。无奈，只好出此下策，造轮子分离vue 模板中的template和script。

需要解析的模板（权当是字符串）：

<template>
  <h1>ooo</h1>
</template>
<script>
console.log("test");
</script>

分离vue中的template

var html = str.substring(str.indexOf("<template>") + 10, str.indexOf("</template>"));

将这一行封装为函数

get_inner(ele, str) {
    var len = ele.length + 4; // <>\n
    // console.log(len);
    return str.substring(str.indexOf("<"+ele+">") + len, str.indexOf("</"+ele+">"));
},

使用示例

res.body = /** 模板内容 */;
var html = this.get_inner("template", res.body);
var js = this.get_inner("script", res.body);

methods中使用

console.log(html);
this.page = html;
this.$nextTick(() => {
     var ele = document.createElement("script");
     ele.innerHTML = js;
     this.$refs.jscode.append(ele);
})

可以看到：
html内容<h1>ooo</h1>
JS代码的输出结果test

终于OK了~