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

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

需要解析的模板(权当是字符串):

<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了~

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!