3

I am developing a small character encoder generator where the user input their text and on the click of a button, it outputs the encoded version.

I've defined an object of the characters that need to be encoded like so:

map = {
    '©' : '©',
    '&' : '&'
},

And here is the loop that gets the values from the map and replaces them:

Object.keys(map).forEach(function (ico) {
    var icoE   = ico.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
    raw = raw.replace( new RegExp(icoE, 'g'), map[ico] );
});

I am them simply outputting the result to a textarea. This all works fine, however the problem I'm facing is this.

© is replaced with © however the & symbol at the beginning of this is then converted to & so it ends up being ©.

I see why this is happening however I'm not sure how to go about ensuring that & is not replaced within character encoded strings.

Here is a JSFiddle for a live preview of what I mean:

http://jsfiddle.net/4m3nw/1/

Any help would be much appreciated

4
  • '& ©'.split('').map(function(char) { return map[char] || char; }).join(''); Jun 20, 2014 at 9:21
  • Number one problem: What if the original text if é? Should it be replaced, or left alone? Jun 20, 2014 at 9:35
  • @NiettheDarkAbsol - This will never be the case as this generator is an internal project for work, for those writing copy for blog posts etc.
    – Lodder
    Jun 20, 2014 at 9:40
  • "This will never be the case" is the mother of all bugs.
    – georg
    Jun 20, 2014 at 10:09

3 Answers 3

3

Prelude: Apart from regex, an idea worth considering is something like this JS function that already handles html entities. Now, on to the regex question.

HTML Special Characters, Negative Lookahead

In HTML, special characters can look not only like © but also like —, and they can have upper-case characters.

To replace ampersands that are not immediately followed by a hash or word characters and a semicolon, you can use something like this:

&(?!(?:#[0-9]+|[a-z]+);)

See the demo.

  • Make sure to use the i flag to activate case-insensitive mode
  • & matches the literal ampersand
  • The negative lookahead (?!(?:#[0-9]+|[a-z]+);) asserts that it is not followed by...
  • (?:#[0-9]+|[a-z]+) a hash and digits, | OR letters...
  • then a semicolon.

Reference

11
  • I had thought of this but wasn't able to figure out a way. Would it be possible to simply detect the semi-colon only as there sometimes might be an ampersand followed by a word. For example M&S
    – Lodder
    Jun 20, 2014 at 9:29
  • FYI Added explanation.
    – zx81
    Jun 20, 2014 at 9:35
  • Thank you, works like a charm. Appreciate the explanation too :)
    – Lodder
    Jun 20, 2014 at 9:36
  • Just one query, it doesn't seem to be converting stand alone ampersands, for example: The apple, orange & lemon. I tried using /&|& (?..... but no hope there :/
    – Lodder
    Jun 20, 2014 at 9:44
  • Added your example to the demo... The regex does match that ampersand. Can you please clarify the problem?
    – zx81
    Jun 20, 2014 at 9:50
1

The problem is that since you process the same string you replace the &in ©. If you re-order your map then that seemingly solves the problem. However according to the ECMAScript specifications, this is not a given, so you would be relying on implementation details of the ECMAScript engine used.

What you can do to make sure it will always work is to swap the keys so that & is always processed first:

map = {
    '©' : '©',
    '&' : '&'
};

var keys = Object.keys(map);
keys[keys.indexOf('&')] = keys[0];
keys[0] = '&';

keys.forEach(function (ico) {
    var icoE   = ico.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
    raw = raw.replace( new RegExp(icoE, 'g'), map[ico] );
});

Obviously you need to add checks for the &'s existence if it isn't always there.

jsFiddle Demo.

0

Probably the simplest code change is to reorder your map by putting the ampersand on top.

0

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.