Concatenate Strings using some array elements (Javascript)

Question

How do you form a string variable by concatenating literal strings and an element of an array

I tried this:

var stringTing = '<a href="www.' + arr[0] + '.com/' + otherArr[0] + '"';

Actual code I'm trying to implement that uses this concept:

var handles = tmpStr.match(reg);    

for (var i = 0; i < handles.length;i++) {
    tmpStr.replace(handles[i], '<a href="www.instagram.com/' + handles[i].replace('@','') + '>' + handles[i] + '</a>');
    console.log(tmpStr);
}

Answer 1

This is happening because you're not reassigning tmpStr. tmpStr.replace does not mutate tmpStr, it returns a new string.

Simply reassign:

var handles = tmpStr.match(reg);    

for (var i = 0; i < handles.length;i++) {
    tmpStr = tmpStr.replace(handles[i], '<a href="www.instagram.com/' + handles[i].replace('@','') + '>' + handles[i] + '</a>');
    console.log(tmpStr);
}

Answer 2

String#replace doesn't mutate the string (as it is a primitive value). It instead returns a new string, so you have to assign that back to tmpStr which may cause other problems, giving that you are replacing substrings using a loop.

Also, why are you matching handlers then going through the string again to replace the matches? Just do it in one go (using replace with a regex and a callback), which is guaranteed not to cause the aforementioned problems:

tmpStr = tmpStr.replace(reg, function(match) {
    return '<a href="www.instagram.com/' + match.replace('@','') + '>' + match + '</a>';
});

Note:

To match all occurences, the regular expression reg should have the global modifier g .

Explanation:

There are two usages of String#replace : one using a string, and the other is using a regex. For the latter, you can pass as the second argument either one of these:

• A Simple string: which will replace all the matches. Only useful when you don't want the change to be dynamic (dependant on the matches).

 var str = "Hello yo! Can yo do this?"; console.log("BEFORE: " + str); str = str.replace(/yo/g, "you"); console.log("AFTER : " + str); 

• A Special string : Which is a string that contains some special replacement patterns such as $& which means the whole match, $n which means the n ^th match group, ... This is much flexible than the simple (static) string above.

 var str = "Hello yo10! Can yo50 do this? Or will yo2018 be there?"; console.log("BEFORE: " + str); str = str.replace(/yo(\\d+)/g, "'The whole match is: $&, and the number is: $1'"); console.log("AFTER : " + str); 

• A Function (callback) : Which is similar to the special string, but instead of passing a string with replacement patterns, you'll pass a function that accepts as arguments the whole match and the matched groups, and the replacement will be whatever this function returns. This offers even more flexibility than the special string, as you can do more logic with the matches.

 var str = "Hello yo10! Can yo50 do this? Or will yo2018 be there?"; console.log("BEFORE: " + str); str = str.replace(/(yo)(\\d+)/g, function(wholeMatch, groupThatContainsTheYo, groupThatConatinsTheNumber) { var newNumber = Number(groupThatConatinsTheNumber); if(newNumber < 30) { newNumber = 0; } else { newNumber = 1; } return groupThatContainsTheYo.toUpperCase() + "-" + newNumber; }); console.log("AFTER : " + str); 

All the above methods will be applied to each match separately. For example, if there are three matches, the function will be called three times, one time for each match, and the return value of each call will replace the current match. The same applies to the special string.

Example:

 var tmpStr = "Hello @world! You like @me?", reg = /@[az]+/gi; console.log("Before: " + tmpStr); tmpStr = tmpStr.replace(reg, function(match) { return '<a href="www.instagram.com/' + match.replace('@','') + '>' + match + '</a>'; }); console.log("After: " + tmpStr);