Question

我有一个用逗号分隔的单词列表。例如：list.join(' ');
如何使用RegEx删除单词（变量）并且不留空格？

查看示例代码：

var testClasses = document.getElementsByTagName("div")[0].className;
var classToRemove = "test3";

document.getElementsByTagName('p')[0].innerHTML = "Removing class ." + classToRemove + " from: <strong>" + testClasses + "</strong>";

var re = new RegExp(classToRemove + "\s?", "g");
testClasses = testClasses.replace(re, "");

// I ran into the same problem trying to be more specific
// var re = new RegExp("(\S+\s?)*(" + classToRemove + "\s?)(\S+\s?)*", "g");
// testClasses = testClasses.replace(re, "$1$3");


document.getElementsByTagName('p')[1].innerHTML = "becomes: <strong>" + testClasses + "</strong>" + " // which looks great on the DOM.";
console.log(testClasses);
console.log(testClasses.split(' '));

<div class="test1 test2 test3 test4 test5"></div>
<p></p>
<p></p>
<p>However, if you check console, the space is there. <br><strong>How do I remove this extra space?</strong> Without having to run a second replace.</p>

限制：

我知道这可以通过字符串或数组操作来实现。但是，我正在努力了解RegEx。
仅使用一个RegEx。两次替换似乎很丑陋而且没必要。
我不能假设在给定单词之前/之后总会有空格。

Answer 1

我可以感谢你Element.classList吗？此API允许通过class，.add()和.remove()等方便的方法改变.toggle()属性。这远远优于滚动您自己的RegExp解决方案。

如果它不必是RegExp解决方案，您可以尝试Array.filter：

'alpha bravo charlie'
  .split(' ')
  .filter(function(token) { return token !== 'alpha' })
  .join(' ');

但让我们继续解决你的RegExp谜语。在字符串"alpha bravo charlie"中，您希望能够删除三个令牌中的任何一个，而不会在剩余令牌之前，之后或之间留下任何不必要的空格。这可以在negative look-ahead assertion（x(?!y)）：

的帮助下完成

function removeToken(text, token) {
  var pattern = new RegExp('(\\s+(?!\\S+\\s+))?' + token + '\\s*');
  return text.replace(pattern, '');
}

如果在令牌之后没有空格，则负向前瞻断言(\s(?!\S+\s+))?将仅包括令牌前面的空格。这样就可以避免在中间删除令牌时删除这两个空格。该表达式读取＆＃34;捕获一个或多个空格字符，除非它们后跟一个或多个非空格字符，后跟一个或多个空格字符＆＃34;。＆＃34;非空格字符＆＃34;匹配你的令牌，而不必在那里注入令牌。由于这些前导空格并不总是存在，因此通过尾随?使捕获组成为可选项。

要测试此代码，我们可以运行所有四种情况：

var text = 'alpha bravo charlie'; var tests = { // <token to remove>: <resulting string> 'alpha': 'bravo charlie', 'bravo': 'alpha charlie', 'charlie': 'alpha bravo', 'delta': 'alpha bravo charlie', }; Object.keys(tests).forEach(function(token) { var expected = tests[token]; var result = removeToken(text, token); console.log('removed "' + token + '" got "' + result + '" which is', expected === result ? 'correct' : 'WRONG'); });

那应该打印

removed "alpha" got "bravo charlie" which is correct removed "bravo" got "alpha charlie" which is correct removed "charlie" got "alpha bravo" which is correct removed "delta" got "alpha bravo charlie" which is correct

如果您希望您的令牌包含在RegExp中具有意义的字符，则您需要escape them。

Answer 2

要匹配空格，您需要在模式中使用文字\s，这意味着反斜杠和s。您在s中使用"\s?"定义了一个可选字母new RegExp(classToRemove + "\s?", "g")，因为在C字符串文字中，需要2个反斜杠来定义文字反斜杠。

使用

var re = new RegExp("\\s*" + classToRemove, "g");

请注意"\\s*"（\s*）匹配零个或多个空格。由于classToRemove不能包含非单词字符，因此它不需要正则表达式转义，所以我不在这里添加转义代码。

如果只能出现一次类名，请删除"g"全局修饰符，然后使用var re = new RegExp("\\s*" + classToRemove)。

RegEx留下了不必要的空间

2 个答案: