Javascript map / replacement function is not replacing square brackets

Question

I have created the function below to replace all square brackets with either [ or ] . The function also includes some other replacements that are working as expected.

var desc = "[On Play] Reveal 5 cards from the top of your deck. Add 1 Tamer card among them to your hand. Place the remaining cards at the bottom of your deck in any order."

var mapObj2 = {
    "<":"[",
    ">":"]",
    "[":"<strong>[",
    "]":"]</strong>",
};

function replaceDesc(str,mapObj2){
    var re = new RegExp(Object.keys(mapObj2).join("|"),"gi");
    return str.replace(re, function(matched){
        return mapObj2[matched.toLowerCase()];
    });

desc = replaceDesc(desc,mapObj2);

The output I am getting is:

"[When Attacking] When you attack an opponent's Digimon, this Digimon gets +1000 DP for the turn."

I expected to get:

"<strong>[When Attacking]</strong> When you attack an opponent's Digimon, this Digimon gets +1000 DP for the turn."

Answer 1

Here is a working example, but I have to say what you're doing here is definitely awkward. It seems like an unnecessary and confusing abstraction, I would prefer to write out each set of regex mappings manually instead of having a function like this to handle them. I'm guessing you're making some sort of markdown to HTML type of thing.

Basically you have two issues.

1. Your square brackets are not escaped, the square bracket [] are special characters in regex used for basically doing something similar to the | character. So, you have to escape them with a backslash \ .
2. Once you've found a match, it's going to come back to you without the escape character, so inside the replace function I have it setup to return the object associated with that key if it's not undefined, otherwise try adding an escape chararcter. If you don't do this, your mapObj2[baseKey] will return undefined when the square braces match.

var desc =
  "[On Play] Reveal 5 cards from the top of your deck. Add 1 Tamer card among them to your hand. Place the remaining cards at the bottom of your deck in any order.";

var mapObj2 = {
  "&lt": "[",
  "&gt": "]",
  "\\[": "<strong>[",
  "\\]": "]</strong>",
};

function replaceDesc(str, mapObj2) {
  var re = new RegExp(Object.keys(mapObj2).join("|"), "gi");
  console.log(re);
  return str.replace(re, function (matched) {
    const baseKey = matched.toLowerCase();
    const altKey = "\\" + baseKey;

    return mapObj2[baseKey] || mapObj2[altKey];
  });
}

console.log(replaceDesc(desc, mapObj2));

EDIT: If you're new to Regex, I'd recommend RegexOne to learn.

EDIT2: Here's an alternative code snippet if you want something (a bit cleaner imo) that also works. It's not super clear to me what you're doing with &lt and &gt here so I pulled them, but you should be able to add them back with a /</gi or />/gi group. You can play around with RegExr to see what different regular expressions will match.

function replaceStrong(str) {
  return str.replace(/\[/gi, "<strong>[").replace(/\]/gi, "]</strong>");
}

console.log(
  replaceStrong("[On Play] Reveal <5> cards from the top of your deck.")
);
// <strong>[On Play]</strong> Reveal <5> cards from the top of your deck.

Answer 2

As @BenMcLean981 already remarked: there is an easier way of doing it. This snippet demonstrates it:

 const desc = "[On Play] Reveal 5 cards from the top of your deck. Add 1 Tamer card among them to your hand. Place the remaining cards at the bottom of your deck in any order."; console.log(desc.replace(/\[.+?\]/g,"<strong>$&</strong>"));