2

I know the heading of this questions seems vague - but it's because I simply don't know how to summarize it appropriately.

I'm working on a project where I enter some text, and it's translated into something else.

There's a fiddle here.

If I enter 4, it translates to the word for.

If I enter b4, it should translate to before.

Instead, it translates to bfor, because it's capturing the variable 4 as a separate variable.

I've tried changing the order, but it doesn't work. Is this a regex problem?

My variables are identified in the JS.

var replaceValues = {
    '4' : 'for',
    'b4' : 'before'
}

$('.bs-text').keyup(function (event) {
    newText = event.target.value;
    for (var txt in replaceValues) {
        var temp = new RegExp(txt, 'gim');
        newText = newText.replace(temp, replaceValues[txt]);
    }
    $('.human-text').text(newText);
});
5
  • 1
    well you need to replace the bigger ones first.... Oct 27, 2017 at 17:06
  • I would suggest having an order of importance for the replacements, because depending on the circumstance, once substitution might take precedence over another. While epascarello's comment has some merit, it may not cover every specific nuance of what you are trying to accomplish. Granted, this would take more work, but I would rather have surety than brevity or ease. Oct 27, 2017 at 17:10
  • I fixed the typo... still not working for me. b4 shows up as bfor... and it should be before. Going back and forth on the order isn't changing anything for me.
    – Millhorn
    Oct 27, 2017 at 17:12
  • JS object does not have defined order of items. It might be working for less object fields, but you might run into some weird situations if the dictionary will be bigger. Oct 27, 2017 at 17:12
  • @MartinAdámek - the dictionary is intended to get a lot bigger. I'm hoping there's a way I don't have to create a custom regex for this. Any thoughts are greatly appreciated.
    – Millhorn
    Oct 27, 2017 at 17:13

3 Answers 3

1

As I noted in the comments, JS objects does not have defined order of its keys, so it is not a good idea to count on this when you know the dictionary will get much bigger.

More about this in another SO question: Does JavaScript Guarantee Object Property Order?

Instead, use simple array that will have the order you define. Sorting of this dictionary array can be done in JS too, you do not need to handle this by your own.

var replaceValues = [
  {key: '4', value: 'for'},
  {key: 'b4', value: 'before'},
];

// sort the values so longer keys go first
replaceValues.sort((a, b) => b.key.length - a.key.length);

$('.bs-text').keyup(function (event) {
    var newText = event.target.value;
    for (var txt in replaceValues) {
        var replacement = replaceValues[txt];
        var temp = new RegExp(replacement.key, 'gim');
        newText = newText.replace(temp, replacement.value);
    }
    $('.human-text').text(newText);
});

You could also use ES6 Map, it should have order guarantied. But be aware that it is not enough to create Map from Object:

A Map object iterates its elements in insertion order — a for...of loop returns an array of [key, value] for each iteration.

It should be noted that a Map which is a map of an object, especially a dictionary of dictionaries, will only map to the object's insertion order—which is random and not ordered.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared

2
  • Sorting the array based on key length is probably easier than manually maintaining the correct order of the words, especially as the number of words increases. Oct 27, 2017 at 18:38
  • That's true, will add a note about that. Oct 27, 2017 at 18:38
1

As mentioned in the comments, you have to look for the longest match first. One option is to generate a single regular expression from the search words, ordered by length, and use a callback to get the correct replacement value.

var replaceValues = {
  '4': 'for',
  'b4': 'before'
};

// generates something equivalent to `/b4|4/gmi`
var pattern = new RegExp(
  Object.keys(replaceValues)
  .sort((a, b) => b.length - a.length)
  .join('|'),
  'gmi'
);

var newText = '4 me b4 me';
console.log(newText.replace(pattern, match => replaceValues[match]));

This works because the regex engine matches alternatives from left to right (i.e. if b4 matches it won't try to match 4). Not sure how this solution scales with more searchwords, but it might actually better because you are only matching the string once instead of n times, i.e. the regex engine doesn't have to traverse the whole string multiple times.

0

The object property has ":" character within property value

$('.bs-text').keyup(function (event) {
    var newText = event.target.value;
    if (replaceValues[newText]) {
      $('.human-text').text(replaceValues[newText])
    };        
});

jsfiddle http://jsfiddle.net/je89deam/5/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.