Converting Mathias Bynens's obfuscate_email() PHP function to a JavaScript function

Question

Here is the original webapp - http://mathiasbynens.be/demo/email-obfuscator#code

I'm converting it to JavaScript app -

function obfuscate_email() {
  var email = document.OBFUSCATOR.email.value,
    output = "";
  if (!email) {
    alert("Please enter an email address.");
  } else {
    if (document.OBFUSCATOR.reverse.checked) {
      email = email.split("").reverse().join("");
      output = "<span class=\"email\">";
    }
    if (document.OBFUSCATOR.encode.checked) {
      for (var i = 0; i < email.length; i++) {
        output += "&#" + email.charCodeAt(i) + ";";
      }
    } else {
      output += email;
    }
    if (document.OBFUSCATOR.reverse.checked) {
      output += "</span>";
    }

    document.getElementById("output").value = document.OBFUSCATOR.link.checked ? "<a href=\"&#109;&#97;&#105;&#108;&#116;&#111;&#58;" + output + "\">" + output + "</a>" : output;
    document.getElementById("preview").innerHTML = document.getElementById("output").value;
  }
}

But it doesn't work properly when all the checkboxes are checked. How can I fix this?

It doesn't work because output becomes <span class="email">html code</span> and this function makes output the href attribute.

Answer 1

To reverse a string in JavaScript, don’t use email.split("").reverse().join("") — use Esrever (online demo):

esrever.reverse('foo@example.com');
// → 'moc.elpmaxe@oof'

To encode text using HTML entities, you could use the he JavaScript library (online demo).

he.encode('foo@example.com', {
  'encodeEverything': true
});
// → 'foo@example.com'

// or, to encode the already-reversed email address:
he.encode('moc.elpmaxe@oof', {
  'encodeEverything': true
});
// → 'moc.elpmaxe@oof'

To answer your question, try not setting innerHTML as that will effectively undo the HTML-encoding. Set .textContent instead.