Javascript 变量替换（CK 编辑器）

Question

How to replace {$name} , {$city} , {$country} with dynamic value. Dynamic value are json format. My requirement: Initially only users create layout design using CKEditor. Then the user will upload CSV file. All data in CSV will replace {$value} . That is the concept

<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 format:

[
        {
            "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": ""
        }
    ]

Answer 1

You can use 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}...` ))

Answer 2

As op said they are getting the template from a database. I would assume it is a string. You could use this to create a template literal.

 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)