Javascript变量替换（CK编辑器）答案

【问题标题】：Javascript variable replacement(CK Editor)Javascript变量替换（CK编辑器）
【发布时间】：2020-02-14 11:24:53
【问题描述】：

如何用动态值替换{$name}、{$city}、{$country}。动态值是 json 格式。我的要求：最初只有用户使用 CKEditor 创建布局设计。然后用户将上传 CSV 文件。 CSV 中的所有数据都将替换 {$value}。就是这个概念

<p>This is the <strong>default </strong>CKEditor installation.{$name} Source editing is provided by the Source Editing Area</a>&nbsp;plugin.</p><p>Follow the{$city}steps below to try it{$country}out:</p><ul><li>Click the <strong>Source </strong>button to display the HTML source of this tex {$website} {$email}in the source editing area.</li><li>Click the <strong>Source </strong>button again to return to the WYSIWYG view.</li></ul><form>First name:<br>

JSON 格式：

[
        {
            "name": "Lijo",
            "city": "Banglaore",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Thoams",
            "city": "Chennai",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Maria",
            "city": "Mumbai",
            "country": "India",
            "website": "",
            "email": ""
        },
        {
            "name": "Dravid",
            "city": "New York",
            "country": "US",
            "website": "",
            "email": ""
        },
        {
            "name": "Sachin",
            "city": "London",
            "country": "UK",
            "website": "",
            "email": ""
        },
        {
            "name": "John",
            "city": "Canbera",
            "country": "AUS",
            "website": "",
            "email": ""
        }
    ]

【问题讨论】：

多用户的 JSON 会创建多行文本吗？

标签： javascript node.js reactjs

【解决方案1】：

您可以使用template literals

const arr = [
  {name: 'foo', city: 'cityFoo', country: 'countryFoo'},
  {name: 'bar', city: 'cityBar', country: 'countryBar'}
]

console.log(arr.map(
  ({name, city, country}) => 
    `<p>This is the <strong>default </strong>CKEditor installation.${name} Source editing is provided by the Source Editing Area</a>&nbsp;plugin.</p><p>Follow the${city}steps below to try it${country}...`
))

【讨论】：

如何使用存储在数据库中的模板？ eval?

【解决方案2】：

正如操作员所说，他们正在从数据库中获取模板。我会假设它是一个字符串。您可以使用它来创建模板文字。

const template = "<p>This is the <strong>default </strong>CKEditor installation.${name} Source editing is provided by the Source Editing Area</a>&nbsp;plugin.</p><p>Follow the${city}steps below to try it${country}out:</p><ul><li>Click the <strong>Source </strong>button to display the HTML source of this tex ${website} ${email}in the source editing area.</li><li>Click the <strong>Source </strong>button again to return to the WYSIWYG view.</li></ul><form>First name:<br>"


const replacements  = [{
    "name": "Lijo",
    "city": "Banglaore",
    "country": "India",
    "website": "",
    "email": ""
  },
  {
    "name": "Thoams",
    "city": "Chennai",
    "country": "India",
    "website": "",
    "email": ""
  }
]

const inset = new Function('name', 'city', 'country', 'website', 'email', 'return `' + template + '`')

const filledIn = replacements .map(({ name, city, country, website, email }) => inset(name, city, country, website, email) )

console.log(filledIn)

【讨论】：