Prevent Email Addresses in Voxel DMs

I found a quite quick way to prevent email addresses from users to enter and submit their email addresses on Voxel direct messages system.

It checks for a lot of possible styles of email address injections like those and mixed options of those variants:

• [email protected]
• email @ email . com
• email (at) email (dot) com
• email [at] email [dot] com
• email at email dot com

Here is what you need to know to prevent email addresses

#1: Add a copy of the /voxel/templates/widgets/messages.php into your child theme in the same folder structure like /voxel-child/templates/widgets/. You will add one thing to it in the next step to prevent email addresses.

#2: Now you will add this id for the text area in line 250:

<textarea id="message-text"

#3: Then you need an empty container below you inbox widget on the /inbox/ page that has the ID “email-notification“.

#4: The last thing you need is this function to be put below your inbox field. You can do that with a tool like WP Code and add the snippet short code below the inbox widget as well.

Here is the code snippet that checks for email addresses in the message field and if it detects one it changes it into ***** ! 🙂
Have fun to prevent email addresses in your internal messaging and let me know if you find something to improve on this one that could be interesting for others.

document.addEventListener('DOMContentLoaded', function () {
  var targetElement = document.querySelector('#email-notification');
  var notificationDiv = document.createElement('div');
  notificationDiv.textContent = "Email addresses are not allowed in messages.";
  notificationDiv.style.display = 'none'; // Hide the notification initially

  // Append the notification element below the target element
  targetElement.appendChild(notificationDiv);

  // Define a function to check for textarea after a timeout
  function checkForTextarea() {
    // Select the textarea using your provided selector
    var textarea = document.querySelector('#message-text');
    if (textarea) {
      // Function to check for email addresses and replace them with asterisks
      function checkAndReplaceEmailAddress() {
        var message = textarea.value;
		var emailRegex = /\b\w+\s*(@|\(at\)|\[at\]|\.|\(dot\)|\[dot\])\s*\w+\s*(\.|\(dot\)|\[dot\])\s*\w+\s*\b|\b\w+\s*@+\s*\w+\s*\.\s*\w+\s*\b/g;
        // Replace all email addresses in the message with asterisks
        message = message.replace(emailRegex, '******');
        textarea.value = message; // Update the textarea value after replacement

        // Display a notification if an email address is detected
        if (emailRegex.test(message)) {
          notificationDiv.style.display = 'block'; // Show the notification
        } else {
          // If no email address is detected, hide the notification
          notificationDiv.style.display = 'none'; // Hide the notification
        }
      }
      // Add an input event listener to the textarea to check and replace email addresses
      textarea.addEventListener('input', function () {
        checkAndReplaceEmailAddress();
      });
      // Add a blur event listener to the textarea to trigger the check when the user clicks away
      textarea.addEventListener('blur', function () {
        checkAndReplaceEmailAddress();
      });
      // Add a keydown event listener to the textarea to check and replace email addresses
      textarea.addEventListener('keydown', function () {
        setTimeout(checkAndReplaceEmailAddress, 0); // Check after a short delay
      });
    } else {
      console.error("Textarea not found. Please check your selector.");
    }
  }
  // Use a setTimeout to wait for the textarea to become available
  var timeout = 3000; // Adjust the timeout duration as needed
  setTimeout(checkForTextarea, timeout);
});

P.S.: You can get even deeper to only prevent this for specific users if you give the short code element visibility rules to only show it, for example, if a user has not yet filled out their image in their profile, or have no published post, etc. you name it 🙂

UPDATE 1: The script that checks for email addresses AND phone number like pattern

#1: It shows ***** if there are at least 6 consecutive numbers without any other characters between them, then shows a notification for phone and a close button to acknowledge the error one made 🙂

document.addEventListener('DOMContentLoaded', function () {
  var targetElement = document.querySelector('#email-notification');
  var notificationDiv = createNotificationDiv("Email addresses and phone numbers are not allowed in messages.");
  targetElement.appendChild(notificationDiv);

  function createNotificationDiv(text) {
    var notificationDiv = document.createElement('div');
    notificationDiv.textContent = text;
    notificationDiv.style.display = 'none';
    
    // Add a close button to the notification
    var closeButton = document.createElement('span');
    closeButton.textContent = 'Okay, acknowledged. Will not do it again.'; // You can use any symbol you prefer
    closeButton.classList.add('email-notification-close');
    closeButton.onclick = function () {
      notificationDiv.style.display = 'none';
    };
    notificationDiv.appendChild(closeButton);
    
    return notificationDiv;
  }

  function checkForTextarea() {
    var textarea = document.querySelector('#message-text');
    if (textarea) {
      function checkAndReplace() {
        var message = textarea.value;
        var emailRegex = /\b\w+\s*(@|\(at\)|\[at\])\s*\w+\s*(\.|\(dot\)|\[dot\])\s*\w+\s*\b|\b\w+\s*@+\s*\w+\s*\.\s*\w+\s*\b/g;
        var phoneRegex = /(?:\+\d{1,2}\s*)?(?:\d{1,4}[-\s]?){6,}\d{1,4}/g;

        message = message.replace(emailRegex, '********');
        message = message.replace(phoneRegex, '********');

        textarea.value = message;

        var emailAndPhoneCount = (message.match(/\*/g) || []).length;
        if (emailAndPhoneCount >= 6) {
          notificationDiv.style.display = 'block';
        } else {
          notificationDiv.style.display = 'none';
        }
      }

      textarea.addEventListener('input', function () {
        checkAndReplace();
      });

      textarea.addEventListener('blur', function () {
        checkAndReplace();
      });

      textarea.addEventListener('keydown', function () {
        setTimeout(function () {
          checkAndReplace();
        }, 0);
      });
    } else {
      console.error("Textarea not found. Please check your selector.");
    }
  }

  var timeout = 3000;
  setTimeout(checkForTextarea, timeout);
});

#2: But now you will also need to add a snippet into your custom CSS to style the close button to acknowledge the fault:

/*no email allowed text close button styles*/
.email-notification-close{
  cursor: pointer;
  border: solid;
  border-width: 2px;
  margin-left: 5px;
  padding: 5px;
}

It will look like this if a phone number was entered:

UPDATE 2: Also check for suspicious text that could lead to contact info exchange

#1: Add this snippet in line 35 of the above code as an additional check. you can add your own list of pattern:

// Define patterns to check for
var wordPatterns = [
  /\bemail me at\b/gi,
  /\bcontact me via email\b/gi,
  /\bsend me your email\b/gi,
  /\blet's connect via email\b/gi,
  /\bI can be reached at\b/gi,
  /\bdrop me an email\b/gi,
  /\bshare your email\b/gi,
  /\bDM me your email\b/gi,
  /\bexchange emails\b/gi,
  /\bget in touch at\b/gi,
  /\breach out via email\b/gi,
  /\bhere's my email\b/gi,
  /\bemail for further discussion\b/gi,
  /\bshare your contact info\b/gi,
  /\bconnect with me using email\b/gi,
  /\bemail communication\b/gi,
  /\bmy email address is\b/gi,
  /\bcontact details: email\b/gi,
  /\bmessage me your email\b/gi,
  // Add more patterns as needed
];

// Function to replace matched patterns with asterisks
function replaceWordPatterns(text, patterns) {
  patterns.forEach(function (pattern) {
    text = text.replace(pattern, '********');
  });
  return text;
}

// Replace word patterns with asterisks
message = replaceWordPatterns(message, wordPatterns);

textarea.value = message;

If you do not have Voxel yet, you can support me by getting it through this link: Get Voxel

And check out my other Voxel related blog posts!