HTML script to convert a text string(s) into a specified hyperlink - html

Question

My basic requirement is to convert given text anchors into hyperlinks, using HTML or any browser side script. We use Windows10/IE/Edge, FYI.
Example : Given text
ABC
CDE
EFG
Required Output:
www.xyz.com/test/ABC
www.xyz.com/test/CDE
www.xyz.com/test/EFG
I have found a bash to hyperlink query here. My requirement is similar but need a browser based script
How to create html links based on a text document of inputs

Answer 1

Put text in <textarea> and read it's content using js/jQuery.
Create links dynamically in memory and later use where needed (I simply append to DOM)
var urlBase = 'https://example.com';
$(document).ready(function () {
$('#input').change(function () {
var lines = $(this).val().split("\n"); // Split textarea content by new line
var links = $('#links'); // Links container
links.html(''); // Empty container content
$.each(lines, function (i, line) {
links.append($('<a>', {href: urlBase + '/' + line, text: line})); // Append new link element
})
})
})
#links a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input"></textarea>
<div id="links"></div>

Answer 2

Get the value of the text input, split it at the new lines and create a string of the a's with teh desired hrefs. I am using a ul to display the results.
Note the advantage of creating a string that is then added to the DOM is that it affects the DOM only once - rather than on each loop of the append option. A small matter for when there is a small list, but if there are millions of lines to be appended - the constant DOM maniulation may cause issues if you use .append().
function convertText(){
var links= document.getElementById('textInput').value;
var linksArr = links.split('\n');
var linkStr = '';
linksArr.forEach(function(link){
linkStr += '<li>'+link+'</li>';
})
document.getElementById('results').innerHTML = linkStr;
}
<textarea id="textInput"></textarea>
<hr/>
<button type="button" onclick="convertText()">Convert text to links</button>
<ul id="results"></ul>