Matching regex only on complete strings, not on parts of strings

Question

Matching regex only on complete strings, not on parts of strings

My goal is to dynamically add and remove strings to a textarea when values in a table are clicked. The functionality should allow users to select and deselect values in the table, with the selected values adding or removing themselves from the textarea. It is important that the values added to the textarea remain as plain strings without any additional characters.

The values being added may contain any characters and could potentially have one value as a substring of another. For example, values like HOLE 1, HOLE 11, cutaway, cut, Commentator (SMITH, John), and (GOAL) are all possibilities.

When a value is clicked to deselect and remove it from the textarea, I am currently using a regex to find and replace the value. However, the current regex pattern works for most cases except for strings starting with a bracket, such as (GOAL). Adding a word boundary selector \b to the regex improves the matching for strings starting with a bracket, but it may affect the matching of substrings within the text.

I am wondering if there is a way to improve the regex or perhaps explore other methods to achieve the desired functionality. Here is a CodePen example demonstrating the adding and removing values from the table.

javascript regex string

Answer 1

Answer №1

To prevent issues when deselecting away but still having cutaway in the list, you can utilize word boundaries (\b). Simply modify the regex as follows:

regex = new RegExp("(?![ .,]|^)?(\\b" + cellText + "\\b)(?=[., ]|$)", 'g');
                                 ^^^                ^^^

Below is the code that was modified to ensure it functions correctly:

removeFromDescription = function(cell) {
        cell.classList.remove(activeClass);

        // Remove from the active cells array
        var itemIndex = tempAnnotation.activeCells.indexOf(cell.textContent);
        tempAnnotation.activeCells.splice(itemIndex, 1);

        // Perform the regex find/replace
        var annotationBoxText = annotation.value,
        cellText = regexEscape(cell.textContent), // Escape any special characters in the string

        regex = new RegExp("(^| )" + cellText + "( |$)", 'g');

        var newDescription = annotationBoxText.replace(regex, ' ');

        setAnnotationBoxValue(newDescription);

        console.info('cellText:         ', cellText);
        console.info('annotationBoxText:', annotationBoxText);
        console.info('newDescription:   ', newDescription);
    };

    regexEscape = function(s) {
         return s.replace(/([-\/\\^$*+?.()|[\]{}])/g, `\\$&`);
    };

    setAnnotationBoxValue = function(newValue) {
        annotation.value = newValue;
    };

Answer 2

To prevent issues when deselecting away but still having cutaway in the list, you can utilize word boundaries (\b). Simply modify the regex as follows:

regex = new RegExp("(?![ .,]|^)?(\\b" + cellText + "\\b)(?=[., ]|$)", 'g');
                                 ^^^                ^^^

Below is the code that was modified to ensure it functions correctly:

removeFromDescription = function(cell) {
        cell.classList.remove(activeClass);

        // Remove from the active cells array
        var itemIndex = tempAnnotation.activeCells.indexOf(cell.textContent);
        tempAnnotation.activeCells.splice(itemIndex, 1);

        // Perform the regex find/replace
        var annotationBoxText = annotation.value,
        cellText = regexEscape(cell.textContent), // Escape any special characters in the string

        regex = new RegExp("(^| )" + cellText + "( |$)", 'g');

        var newDescription = annotationBoxText.replace(regex, ' ');

        setAnnotationBoxValue(newDescription);

        console.info('cellText:         ', cellText);
        console.info('annotationBoxText:', annotationBoxText);
        console.info('newDescription:   ', newDescription);
    };

    regexEscape = function(s) {
         return s.replace(/([-\/\\^$*+?.()|[\]{}])/g, `\\$&`);
    };

    setAnnotationBoxValue = function(newValue) {
        annotation.value = newValue;
    };

Matching regex only on complete strings, not on parts of strings

Answer №1

Similar questions

"error: unable to retrieve message channel name, result is undefined

Unusual problem encountered with Chart.js bar chart, image dispersion

Calculate a value within a MongoDB field

What is the best way to resolve an npm build error on Windows 10?

Is there a way to arrange list items to resemble a stack?

Having trouble retrieving response content in Mithril

The npm module parsing has encountered an error... It appears that a suitable loader is required to process this file format

(Critical) Comparing AJAX GET Requests and HTTP GET Requests: identifying the true client

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

Troubleshooting the Create Order Issue: Integrating PayPal Checkout with Smart Payment Buttons using React and Redux

Steps to generate an error in the 'response' function of a $httpProvider interceptor

Switch up the background picture by chance when hovering over it with the mouse

What is the best way to set up a property in a service that will be used by multiple components?

Display conceal class following successful ajax response

SimpleModal Jquery experiencing intermittent flashing in Firefox

The behavior of Elementor lightbox buttons upon being clicked

Tips for ensuring your jQuery events always trigger reliably: [Issues with hover callback not being fired]

Choosing multiple options from a list

The parent's setState does not trigger the child's componentWillReceiveProps

In Angular 2, you can include a routerLink in a child component that directs to the root