Injecting images to text with tags to build display box

[#1]

I have a JSON which I get with GET request. The JSON contains two keys, text and images. images has list of objects with name of image and then the image. 

In text "¤imagename|img¤" parts are to be replaced with "imagename" image found from images. Below is an example in associative array format

aa = Associative Array();
aa["text"] = "First line with no image
¤tile|img¤
text and ¤windmap|img¤ image
multiple ¤tile|img¤ ¤windmap|img¤ images
last line";
aa["images"] = Associative Array();
aa["images"]["tile"] = New Image("$SAMPLE_IMAGES/tile.jpg");
aa["images"]["windmap"] = New Image("$SAMPLE_IMAGES/windmap.png");

In the original application, the text has images embedded within the text, so it looks something like this:

So the question is: how to build this with JSL? I have written recursive function to do this (below), but I'm looking for other ideas / to provide a challenge to other scripters.

My current solution (which works good enough for now):

View more...

Names Default To Here(1);

// example associative array
aa = Associative Array();
aa["text"] = "First line with no image
¤tile|img¤
text and ¤windmap|img¤ image
multiple ¤tile|img¤ ¤windmap|img¤ images
last line";
aa["images"] = Associative Array();
aa["images"]["tile"] = New Image("$SAMPLE_IMAGES/tile.jpg");
aa["images"]["windmap"] = New Image("$SAMPLE_IMAGES/windmap.png");


find_imgs = function({str}, {Default Local},
	/* find img names from string */
	imgs = {};
	cur_img = Regex(str, "(¤.+?\|img¤)");
	While(!IsMissing(cur_img),
		Insert Into(imgs, cur_img);
		Substitute Into(str, cur_img, "");
		cur_img = Regex(str, "(¤.+?\|img¤)");
	);
	return(imgs);
);

create_line_hlb = function({cur_str, img_list, aa, hlb = H List Box()}, {Default Local},
	/* create one line of the text */
	If(Length(cur_str) < 1, // no more cur str
		return(hlb);
	);

	If(N Items(img_list) == 0, // no images left -> add rest of text to text box 
		Insert Into(hlb, Text Box(cur_str));
		return(hlb);
	);

	img_idx = Contains(cur_str, img_list[1]);
	If(img_idx == 1,
		cur_img = Remove From(img_list, 1)[1];
		img = aa[Substr(Word(1, cur_img, "|"), 2)];
		hlb << Append(img);
		cur_str = Substr(cur_str, Length(cur_img) + 1);
	,
		txt = Substr(cur_str, 1, img_idx - 1);
		Insert Into(hlb, Text Box(txt));
		cur_str = Substr(cur_str, img_idx );
	);
	create_line_hlb(cur_str, img_list, aa, hlb);
);


text_to_displaybox = function({aa}, {Default Local},
	/* create the displaybox based on associative array */
	vlb = V List Box();
	For Each({line}, Words(aa["text"], "\!N"),
		img_list = find_imgs(line);
		hlb = create_line_hlb(line, img_list, aa["images"] /*,H List Box()*/);
		vlb << Append(hlb);
	);
	return(vlb);
);

// Demo of script
// change size to make new window a bit smaller
aa["images"]["tile"] << Set Size({128, 128});
aa["images"]["windmap"] << Set Size({128, 128});

nw = New window("test", text_to_displaybox(aa));
Write();  

[#2]

My first instinct is to do this:

Names Default To Here(1);

// example associative array
aa = Associative Array();
aa["text"] = "First line with no image
¤tile|img¤
text and ¤windmap|img¤ image
multiple ¤tile|img¤ ¤windmap|img¤ images
last line";
aa["images"] = Associative Array();
aa["images"]["tile"] = New Image("$SAMPLE_IMAGES/tile.jpg");
aa["images"]["windmap"] = New Image("$SAMPLE_IMAGES/windmap.png");

for each({imgn}, aa["images"]<<get keys, aa["images"][imgn] << Set Size({128,128}));

nw = New Window("test", vlb = v list box() );
hlb = {};

lines = words( aa["text"], "\!N" );

for each({line, l}, lines,
	parts = words( line, "¤" );
	hlb[l] = h list box();
	for each ({p}, parts, 
		cur_img = Regex(p, "^([^ ]+)\|img$", "\1");
		if(	Is Missing(cur_img),
			insert into(hlb[l], text box(p) ),
			hlb[l] << Append( aa["images"][cur_img] );
		);
	);
	insert into(vlb, hlb[l])
);