regular expression for replacing only alphanumeric strings

Question

regular expression for replacing only alphanumeric strings

I'm currently developing a tool that tags alphanumeric words based on the option selected from the right-click context menu. However, I am facing issues when a group of words containing special characters is selected.

I have been using the following RegEx that I came across on this very site: /(\s[a-zA-Z0-9]+)/g

To demonstrate the problem, try selecting 123b @#$@#$ or @#$@#$ a from the text, and then right-click and choose an option. The expected outcome should be [TAG] 123b @#$@#$ or @#$@#$ [TAG] a respectively.

There is also an issue when trying to tag the entire string:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71031019041d31161c10181d5f121e1c">[email protected]</a> 123a % / ! @$# % % %^* && ^ Lorem ipsum

The expected output should be:

[TAG] <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01736069746d41666c60686d2f626e6c">[email protected]</a>  [TAG] 123a % / ! @$# % % %^* && ^  [TAG] Lorem  [TAG] ipsum

.

The goal is to tag strings like 123abc, abc123, 12ab3 - regardless of the number of digits and letters. Additionally, if an email address is selected, it should also be tagged.

Any suggestions on how to resolve this issue?

jsFiddle

HTML:

<p contenteditable="true"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dba9bab3aeb79bbcb6bab2b7f5b8b4b6">[email protected]</a> 123a % / ! @$# % % %^* && ^ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#$@#$ a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. Aliquam dictum a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

JS:

function replaceText(selectedText, selectedTag){
    if(selectedText == "")
        return false;
    if(selectedText.match(/^[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/))
        replacedText = selectedText.replace(/(\s[a-zA-Z0-9]+)/g, " " + selectedTag + " " + "$1");
    else
        replacedText = selectedTag + " " + selectedText.replace(/(\s[a-zA-Z0-9]+)/g, " " + selectedTag + " " + "$1");
    originalText = $('p').html();
    newText = originalText.replace( new RegExp(selectedText,"g") , replacedText);
    $('p').html(newText);
}

javascript regex

Answer 1

Answer №1

Check out the revised code snippet below.

Important: The else condition has been modified to first eliminate all special characters and then substitute all instances of a string with [tag] + string.

HTML:

<p contenteditable="true"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7406151c0118341319151d185a171b19">[email protected]</a> 123a % / ! @$# % % %^* && ^ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#$@#$ a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. Aliquam dictum a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

JavaScript:

var selectedTag, selectedText, originalText, newText, replacedText, selectedTextArray;

function getSelectedText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function replaceText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else {
        selectedText = selectedText.replace(/[^a-zA-Z0-9 ]/g,'');
        selectedText = selectedText.replace(/\s{2,}/g, ' ');
        selectedTextArray = selectedText.split(" ");
    }
    if(selectedTextArray.length > 0) {
        var selectedTextPart = '';
        originalText = $('p').html();
        newText = originalText;
        for(var i=0; i<selectedTextArray.length; i++) {
            selectedTextPart = selectedTextArray[i];
            selectedTextPart = new RegExp("\\b"+selectedTextPart+"\\b", "g");
            replacedText = selectedTag+' '+'$&';
            newText = newText.replace( selectedTextPart , replacedText);
        }
        $('p').html(newText);
    }
}

$.contextMenu({
    selector: 'p', 
    callback: function(key, options) {
        selectedTag = key;
        selectedText = $.trim(getSelectedText());
        replaceText(selectedText, selectedTag);
    },
    items: {
        "[ORG]": {name: "[ORG]"},
        "[PER]": {name: "[PER]"},
        "[LOC]": {name: "[LOC]"}
    }
});

Answer 2

Check out the revised code snippet below.

Important: The else condition has been modified to first eliminate all special characters and then substitute all instances of a string with [tag] + string.

HTML:

<p contenteditable="true"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7406151c0118341319151d185a171b19">[email protected]</a> 123a % / ! @$# % % %^* && ^ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. 123b @#$@#$ a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue tortor, dictum a turpis non, dapibus vehicula neque. Aliquam dictum a quam vel cursus. Duis at mattis quam, ornare consequat enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

JavaScript:

var selectedTag, selectedText, originalText, newText, replacedText, selectedTextArray;

function getSelectedText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

function replaceText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else {
        selectedText = selectedText.replace(/[^a-zA-Z0-9 ]/g,'');
        selectedText = selectedText.replace(/\s{2,}/g, ' ');
        selectedTextArray = selectedText.split(" ");
    }
    if(selectedTextArray.length > 0) {
        var selectedTextPart = '';
        originalText = $('p').html();
        newText = originalText;
        for(var i=0; i<selectedTextArray.length; i++) {
            selectedTextPart = selectedTextArray[i];
            selectedTextPart = new RegExp("\\b"+selectedTextPart+"\\b", "g");
            replacedText = selectedTag+' '+'$&';
            newText = newText.replace( selectedTextPart , replacedText);
        }
        $('p').html(newText);
    }
}

$.contextMenu({
    selector: 'p', 
    callback: function(key, options) {
        selectedTag = key;
        selectedText = $.trim(getSelectedText());
        replaceText(selectedText, selectedTag);
    },
    items: {
        "[ORG]": {name: "[ORG]"},
        "[PER]": {name: "[PER]"},
        "[LOC]": {name: "[LOC]"}
    }
});

Answer 3

Answer №2

They recommended keeping it simple.

I categorized every word into the following groups:

containing only letters and numbers
containing letters, numbers, periods, or commas
emails

After that, I assigned a tag and inserted it back into the main text. That's all there is to it!

function updateText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else{
        var selectedTextArray = selectedText.split(" ");

        originalText = $('p').html();

        selectedTextArray.forEach(function(item){
            if(item.match(/^[a-zA-Z0-9]+$/) // letters and numbers only
               || item.match(/^[a-zA-Z0-9.,]+$/) // letters, numbers, periods, or commas
               || item.match(/([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+))/) // emails               
                ){
                    originalText = originalText.replace(new RegExp("\\b" + item + "\\b","g") , selectedTag + " " + item);

                }                 
        });
        newText = originalText;
    }

    $('p').html(newText);
}

Link to jsFiddle

Answer 4

They recommended keeping it simple.

I categorized every word into the following groups:

containing only letters and numbers
containing letters, numbers, periods, or commas
emails

After that, I assigned a tag and inserted it back into the main text. That's all there is to it!

function updateText(selectedText, selectedTag){
    if(selectedText == "") {
        return false;
    }
    else{
        var selectedTextArray = selectedText.split(" ");

        originalText = $('p').html();

        selectedTextArray.forEach(function(item){
            if(item.match(/^[a-zA-Z0-9]+$/) // letters and numbers only
               || item.match(/^[a-zA-Z0-9.,]+$/) // letters, numbers, periods, or commas
               || item.match(/([a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+))/) // emails               
                ){
                    originalText = originalText.replace(new RegExp("\\b" + item + "\\b","g") , selectedTag + " " + item);

                }                 
        });
        newText = originalText;
    }

    $('p').html(newText);
}

Link to jsFiddle

regular expression for replacing only alphanumeric strings

Answer №1

Answer №2

Similar questions

Pattern: locate a sequence of three numerical digits within the provided whole number

Retrieving image source from JSON data using AngularJS

Invoke actions when clicking outside of components

Creating a Like button using react.js

Having issues with AngularJS where ng-table/ng-repeat rows are failing to load properly

Troubleshooting HTTP requests in Angular JS when dealing with nested scopes

Automate the execution of webdriver/selenium tests when a form is submitted

Changing the value within a deeply nested object

Remove all $.ajax requests from content that has been loaded using $.ajax in jQuery

developing a dropdown menu feature

Update issue with Material UI table rows when using setState method

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

Image carousel with interactive buttons

Unable to retrieve all the necessary data from the LinkedIn API

Using a Javascript for loop to extract the initial event date from a Google Calendar

The attempt to decode the string from POST using json_decode failed due to a hang-up in

What methods are available for updating the href color of an element using the DOM?

The ng-model binding does not automatically update another ng-model within the same object

Conceal the title attribute when hovering over a link using javascript/jquery

The uiGmapGoogleMapApi.then function is failing to execute on Android devices