Replacement issues

Question

I've been having issues with replacements and javascript for the past week. I'm doing all sort of replacements with Python and so far I've never had so many issues. Please help me? :P

This is the part of my code that gives me problems:

function SaeReplacerMenuButton(buttonchosen){
var Texto = document.getElementById("wpTextbox1").value;
$("."+buttonchosen).each(function() {
    var Reemplazo = this.value.split("=");
    var PalabraAntigua = new RegExp(Reemplazo[0],'g'); /*Esto genera el regext*/
    Texto = Texto.replace(" "+PalabraAntigua+" ", " "+Reemplazo[1]+" ");
    Texto = Texto.replace(" "+PalabraAntigua+".", " "+Reemplazo[1]+".");
    Texto = Texto.replace(" "+PalabraAntigua+",", " "+Reemplazo[1]+",");
    }
);
document.getElementById("wpTextbox1").value = Texto;
}

It should:

1. Get a string from specific fields (textareas with an specific class, actually). The value in one of those textareas is as example: "miedo={{miedo}}".
2. Then split it into 2.
3. Then do a search for the first split between whitespaces " miedo ".
4. I finds any match, replace it for the 2nd split ( {{miedo}} ).

After that, I added some code to make replacementes if also finds it with a , and a . instead of just whitespaces, and that's when the problems starts. When I run the script, it replaces:

miedo miedo miedo miedo miedo miedo miedo miedo miedo miedo

with:

 miedo {{miedo}} {{miedo}}.{{miedo}} {{miedo}}.{{miedo}} {{miedo}}.{{miedo}} {{miedo}}.{{miedo}} miedo

But why? there wasn't any dot in the original text, so the code that should replace it adding a dot shouldn't do anything.

Note: I know nothing about RegEx, so this was an attempt to do a global replacement with a var + whitespaces instead of just a string. Is there any "easy" way to do that?

I tried to replicate it on jsfiddle as seen at http://prntscr.com/7wwns1 but I was unable to make it works, so I decided to upload the script so you guys can test it.
It's a .rar file with a .js and a .html inside: http://coznothingisforever.webs.com/replacerforstackoverflow.rar

Answer 1

I think what you want for your function is something like this:

function SaeReplacerMenuButton(buttonchosen){
    var Texto = document.getElementById("wpTextbox1").value;
    $("."+buttonchosen).each(function() {
        var Reemplazo = this.value.split("=");
        Texto = Texto.replace(new RegExp("(\\b)"+Reemplazo[0]+"(\\b)", "g"), "$1"+Reemplazo[1]+"$2");
    });
    document.getElementById("wpTextbox1").value = Texto;
}

If you really only want to match space, comma, and period after, the RegExp can be:

new RegExp("(\\b)"+Reemplazo[0]+"([ ,\\.])", "g")

Answer 2

When you create a RegExp object, and then add a sring to it, you get a string, not a regex.

Have a look at what console writes:

var rx = new RegExp("word","g");
console.log(typeof(rx)); // -> object
var rx2 = " " + rx + " ";
console.log(typeof(rx2)); // -> string

So, you cannot add spaces or any other strings like that. You need to add them right at the RegExp creation.

Now, what you are looking for is word boundaries.

There are three different positions that qualify as word boundaries:

Before the first character in the string, if the first character is a word character.

After the last character in the string, if the last character is a word character.

Between two characters in the string, where one is a word character and the other is not a word character.

Word boundaries should not be placed in capturing groups as they are zero-width assertions that act like look-arounds, not consuming any text and are always empty (thus, no additional overhead with cpaturing groups or backreferences is necessary):

function replace() {
  var Texto = document.getElementById("wpTextbox1").value;
  var Reemplazo = "miédo={{miédo}}".split("=");
  var PalabraAntigua = new RegExp("\\b"+Reemplazo[0]+"\\b(?!}})",'g');
  Texto = Texto.replace(PalabraAntigua, Reemplazo[1]);
//var PalabraAntigua = new RegExp(Reemplazo[0],'g'); /*Esto genera el regext*/
//Texto = Texto.replace(" "+PalabraAntigua+" ", " "+Reemplazo[1]+" ");
//Texto = Texto.replace(" "+PalabraAntigua+".", " "+Reemplazo[1]+".");
//Texto = Texto.replace(" "+PalabraAntigua+",", " "+Reemplazo[1]+",");
  document.getElementById("t").innerHTML = Texto;
}

<input id="wpTextbox1" value="miédo miédo miédo miédo miédo miédo miédo miédo miédo miédo"/>
<input type="Submit" onclick="replace();"/>
<div id="t"/>