时间戳

首页 > 解决方案 > 基于用户选择的角度更改/替换字符串中的值

javascript - 基于用户选择的角度更改/替换字符串中的值

问题描述

我正在开发一个录取通知书模板，该模板将根据从候选人列表中选择的候选人替换/修改动态数据点，如姓名、地址、角色、薪水等。动态数据点有一个固定的语法，即它们将包含在 内<<>>，例如：

Welcome to the family, <<Name>> 
You will be paid <<Salary>> for the duration of your employment.

换句话说，这几个数据点将通过选择我们想要提供工作的候选人而改变，而模板的其余部分将保持不变。这里有一个demo来帮助你理解。

这是我用 1 个模板创建的虚拟数组，在现实世界的应用程序中，我可以有许多具有不同条款名称的模板，所以我正在寻找一个永久修复。 .ts 文件，模板列表：

[{

    templateId: 1,
    templateName: "Offer",
    clauses: [
      {
        clauseName: "Introduction",
        clauseId: 1,
        texts: [
          {
            text: "Hello <<Name>>, Welcome to the Machine",
            textId: 1,
          }]
      },
      {
        clauseName: "Address",
        clauseId: 2,
        texts: [
          {
            text: "<<Address>>",
            textId: 2,
          }]
      },
      {
        clauseName: "Date Of Joining",
        clauseId: 3,
        texts: [
          {
            text: "You can join us on <<DateOfJoining>>",
            textId: 3,
          }]
      },
    ]
  }]

这是候选人名单，

  candidateList = [
    { name: "Simba", address: "Some Random Cave" },
    { name: "Doe John", address: "line 4, binary avenue, Mobo" },
    { name: "B Rabbit", address: "8 mile road, Detroit" },
    { name: "Peter Griffin", address: "Spooner Street" },
    { name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
    { name: "Morty", address: "Time Machine XYZ" },
    { name: "Brock", address: "pokeball 420, Medic center" },
  ]

标签： javascripthtmlangulartypescriptdynamic-data

解决方案

您可以使用正则表达式来替换这些占位符，例如：

var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
       return candidate[token.toLowerCase()];
    });

将其合并到您的显示中的一种方法是创建一个返回格式化文本的属性。

我在这里更新了你的 stackblitz。

推荐阅读