How to add prefix, suffix & infix to every line with javascript?

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

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)