Regex只匹配字符串，而不是子字符串

I'm adding strings to a textarea when values in a table are clicked. It has to be possible to select and deselect values in the table, and they will add/remove themselves from the textarea. The textarea has to be a string, and the added values can't be wrapped in any other characters.

当单击表中的值时，我正在向textarea添加字符串。它必须能够在表中选择和取消选择值，并且它们将从textarea中添加/删除它们自己。textarea必须是一个字符串，添加的值不能用任何其他字符包装。

The values that are being added could potentailly have any characters in, and may have one of the other of the values as a substring, here are some examples: HOLE 1, HOLE 11, HOLE 17, HOLE (1), cutaway, cut, away, cut-away, Commentator (SMITH, John), (GOAL), GOAL

正在添加的值可以包含任何字符，并且可以将其他值中的一个作为子字符串，这里有一些示例:钻孔1、钻孔11、钻孔17、钻孔(1)、剖面图、切割、切割、解说员(SMITH、John)、(GOAL)、GOAL

Once a value has been appended to the textarea, and it's clicked again to deselect it, I'm searching for the value and removing it like so:

一旦某个值被追加到文本区域，然后再次点击取消选中它，我就搜索这个值并将其删除:

var regex = new RegExp("(?![ .,]|^)?(" + mySelectedText + ")(?=[., ]|$)", 'g');
var newDescriptionText = myTextAreaText.replace(regex, '');

The regex matches correctly for strings/substrings of text e.g. cutaway and away however wont work for anything beginning with a bracket e.g. (GOAL). Adding the word boundary selector to the start of the expression \b, will make the regex match for strings that start with a bracket but wont work for strings/substrings containing the same text.

regex对于文本的字符串/子字符串是正确匹配的，例如斜线，但是对于任何以括号开头的字符串(比如GOAL)都是无效的。将单词边界选择器添加到表达式\b的开头，将使regex匹配以括号开头的字符串，但不会为包含相同文本的字符串/子字符串工作。

Is there a way to achieve this using regex? Or some other method?

有使用regex实现这一点的方法吗?还是其他方法?

Here's a working CodePen example of the adding/removing from table.

这里有一个工作的CodePen示例，其中添加/删除了表。

1 个解决方案

#1

You can use word boundaries (\b) to avoid issue when you deselect away and have cutaway in the list. Just change the regex to:

您可以使用单词边界(\b)来避免当您取消选择并在列表中有剖面图时出现的问题。只需将regex更改为:

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

Here's the code I changed to make it works:

下面是我修改过的代码，让它运行起来:

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

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

        // Do the regex find/replace
        var annotationBoxText = annotation.value,
        cellText = regexEscape(cell.textContent), // Escape any funky characters from 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;
    };

#1