javascript - 正则表达式以匹配文本区域中用空格填充的行条目

Question

我有一个 html 文本区域，其中包含如下所示的条目:

google.com
   youtube.com   word word
  netflix.com   
 twitch.tv
  vimeo.com  word
soundcloud.com  word    word

我想制作一个功能，在列表中搜索一个 url 并删除它的所有条目。为此，我首先需要一个正则表达式来查找第一次出现的位置。请注意，我只需要并且想要找到第一个出现的地方。

该功能只能删除完全匹配项。也就是说，

DeleteEntry("youtube.com");

不应该删除第二行，但是

DeleteEntry("youtube.com   word word");

应该。

所以基本上，我需要匹配这个模式

(beginningOfString OR newlineChar) then (anyWhiteSpaceExceptNewline) then (ENTRY) then (anyWhiteSpaceExceptNewline) then (endOfString OR newlineChar)

---

这是我目前的情况

var expression = "\n|^[ \f\r\t\v]*" + entry + "[ \f\r\t\v]*\n|$";
var match = listbox.value.match(expression);

它似乎不像我期望的那样工作。

Answer 1

注意:如果您想在字符串中使用\，您必须将其转义。 "\some text" 是错误的，但是 "\\some text" 是正确的。

var ta = document.getElementById("ta"),
    inp = document.getElementById("inp"),
    btn = document.getElementById("btn");
    
// escape text to be used inside RegeExp (from: https://stackoverflow.com/q/3115150/6647153)
function escape(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}

function deleteEntry(query) {
  var text = ta.value;
      
  var regexText = query.trim()                                    // remove surrounding spaces
                       .split(/\s+/)                              // split into tokens ("a   b c" becomes ["a", "b", "c"])
                       .map(escape)                               // escape the tokens ("a.com" becomes "a\\.c" so it'll be /a\.c/ where the '.' is regarded as litteral '.' not as the special character .)
                       .join("\\s+");                             // joins the tokens together with \s+ (["a", "b", "c"] becomes "a\\s+b\\s+c" so it'll be /a\s+b\s+c/)
      
  var regex = new RegExp("^\\s*" + regexText + "\\s*$", "gm");    // surrond regexText with ^\s* and \s*$ and use the g modifier for multiple matches and the m modifier for multiline text
  
  ta.value = text.replace(regex, "");                             // replace the matched text with "" and reassign it back to the textarea
}
    
btn.onclick = function() {
  deleteEntry(inp.value);                                         // calling deleteEntry passing to it the input's value as the query
}

textarea {
  display: block;
  width: 100%;
  height: 100px;
}

<textarea id="ta">
google.com
   youtube.com   word word
  netflix.com   
 twitch.tv
  vimeo.com  word
soundcloud.com  word    word
</textarea>
<input id="inp"><button id="btn">Delete</button>