如何为 javascript 的每一行添加前缀、后缀和中缀？

Question

I have a string containing multiple lines like this example:

01.jpg
02.jpg
03.jpg
04.jpg
05.jpg

I want the final output to be like this:

<img data-scr="http://example.com/01.jpg" alt="Page 01.jpg">
<img data-scr="http://example.com/02.jpg" alt="Page 02.jpg">
<img data-scr="http://example.com/03.jpg" alt="Page 03.jpg">
<img data-scr="http://example.com/04.jpg" alt="Page 04.jpg">
<img data-scr="http://example.com/05.jpg" alt="Page 05.jpg">

But my javascript isn't outputing what I want. Can anyone help me fix code?

 var prefix = '<img data-scr="http://example.com/'; var infix = '" alt="Page '; var suffix = '">'; var txt = `01.jpg 02.jpg 03.jpg 04.jpg 05.jpg` var fin = prefix + txt.split('\n').join(infix + '\n' + prefix) + infix + txt + suffix; console.log(fin)

Answer 1

Instead of joining immediately, you should map each filename to the <img string you want and concatenate inside the callback:

 var prefix = '<img data-scr="http://example.com/'; var infix = '" alt="Page '; var suffix = '">'; var txt = `01.jpg 02.jpg 03.jpg 04.jpg 05.jpg` var fin = txt.split('\n').map(f => prefix + f + infix + f + suffix).join('\n'); console.log(fin)

Answer 2

Using a template string

 const txt = `01.jpg 02.jpg 03.jpg 04.jpg 05.jpg`; const res = txt.split("\n").map((t) => `<img data-scr="http://example.com/${t}" alt="Page ${t}">`).join("\n"); console.log(res);