给定一个模板和一个对象，利用对象中的数据渲染模板，并返回最终结果 --面试

青挽梦

已于 2022-02-11 11:16:36 修改

阅读量465

点赞数 1

文章标签：面试职场和发展 vue javascript 前端

于 2022-02-11 10:21:01 首次发布

本文链接：https://blog.csdn.net/green_dream123/article/details/122874936

版权

本文介绍了一种JavaScript函数renderTpl，用于替换HTML模板中的变量表达式，实现实时数据动态插入。通过实例展示了如何使用该函数将给定的数据结构tplData应用到模板tpl中，生成最终输出。

摘要由CSDN通过智能技术生成

在这里插入图片描述

function renderTpl(tpl, data) {
      tpl = tpl.replace(/\[/g, '.').replace(/\]/g, '')
      // tpl = tpl.replace(/{{.*?}}/g, function(matchContent, location) { // matchContent 字符串与正则匹配的内容 location匹配内容出现位置
      tpl = tpl.replace(/{{\s*\w+\s*}}/g, function(matchContent, location) { // matchContent 字符串与正则匹配的内容 location匹配内容出现位置
        let key = matchContent.match(/(?<={{).*?(?=}})/g)
        key = key.map(k => k.trim())[0]
        return data[key]
      }).replace(/{{\w+(\.\w+)+}}/g, function(matchContent) {
        let keys = matchContent.match(/(?<={{).*?(?=}})/g)[0]
        let res = data
        keys = keys.split('.')
        for (let key of keys) {
          res = res[key]
        }
        return res
      })
      return tpl;
    }

    let tpl = "你好,我们公司是{{ company }},我们属于{{group.name}}业务线,我们在招聘各种方向的人才,包括{{group.jobs[0]}}等。"
    let tplData = {
      company: "阿里巴巴",
      group: {
        name: "天猫",
        jobs: ['JAVA'],
      }
    };

    const str = renderTpl(tpl, tplData);
    console.log(str); // 你好，我们公司是阿里巴巴，我们部门是天猫