使用 regExp 将字符串中的多个单词动态匹配到另一个单词

Question

我们都知道 regExp 可以使用两个字符串中的一个共同词作为匹配标准来匹配两个字符串。这段代码会将 "I like apples" 匹配到 "apples"，因为它们都有共同的“apples” .

var str1 = "apples";
var test1 = "I like apples";
var reg1 = new RegExp(str1, "i");

if (test1.match(reg1)) {
    console.log(str1 + " is matched");
}

但是如果不是使用单个常用词（或字符串的公共部分）匹配字符串，我需要使用多个常用词匹配两个字符串，这些常用词可能被其他词分隔？让我给你举个例子：

test2 = "我喜欢 juicy 红色 fruits" 应该匹配 str2 = "juicy fruits " 因为test2 包含所有str2 第二个关键词（参见下面的对象），即使它之间还有其他词。

棘手的部分是我无法确切知道字符串是什么，所以我必须动态匹配它们。我不知道的字符串是用户输入字段的值，有很多可能。此值将与存储在此对象中的字符串匹配：

var str2 = {
    "red apples": "fruits",
    "juicy fruits": "price : $10"
};

因此，无论用户在输入字段中键入什么，当且仅当它包含对象属性之一的所有单词时，它都必须是匹配的。因此，在本例中，“juicy red and成熟fruits”应该匹配第二个对象属性，因为它包含了它的所有关键字。 p>

编辑：我的目标是输出与我匹配的字符串相关的值。在我的示例中，如果第一个键匹配，则应输出“fruits”。如果匹配 'juicy fruits'，它应该输出 'price : $10'。获取与对象键关联的字符串是用户必须使用输入搜索它们的原因。

是否可以使用纯 javascript 使用 regExp 来做到这一点？

这是我（糟糕地）尝试做的事情：https://jsfiddle.net/Hal_9100/fzhr0t9q/1/

Answer 1

对于您所描述的情况，您甚至不需要正则表达式。如果将搜索字符串拆分为空格；您可以检查要匹配的每个单词是否包含在搜索单词数组中。

function matchesAllWords(searchWords, inputString) {
  var wordsToMatch = inputString.toLowerCase().split(' ');

  return wordsToMatch.every(
    word => searchWords.indexOf(word) >= 0);
}

在下面的 sn-p 中，输入 input 会导致重新计算 searchWords。然后为匹配的li 元素赋予.match 类以突出显示它们。

function updateClasses(e) {
  var searchWords = e.target.value.toLowerCase().split(' ');

  listItems.forEach(listItem => listItem.classList.remove('match'));

  listItems.filter(
      listItem =>
      matchesAllWords(searchWords, listItem.innerText))
    .forEach(
      matchingListItem =>
      matchingListItem.classList.add('match'));
}

function matchesAllWords(searchWords, inputString) {
  var wordsToMatch = inputString.toLowerCase().split(' ');
  
  return wordsToMatch.every(
    word => searchWords.indexOf(word) >= 0);
}

function searchProperties(e) {
  var searchWords = e.target.value.toLowerCase().split(' ');

  for (var property in propertiesToSearch) {
    if (matchesAllWords(searchWords, property)) {
      console.log(property, propertiesToSearch[property]);
    }
  }
}

var propertiesToSearch = {
  "red apples": 1,
  "juicy fruit": 2
};

listItems = [].slice.call(
  document.getElementById('matches').querySelectorAll('li')
);

document.getElementById('search').addEventListener('keyup', updateClasses);
document.getElementById('search').addEventListener('keyup', searchProperties);

.match {
  color: green;
}

<label for="search">
  Search:
</label>
<input type="text" name="search" id="search" />

<ul id="matches">
  <li>red apples</li>
  <li>juicy fruits</li>
</ul>

更新要使用这种实现来搜索属性，请使用for .. in 循环，如下所示。再一次，在上下文中查看这个工作的 sn-p。

function searchProperties(e) {
  var searchWords = e.target.value.toLowerCase().split(' ');

  for (var property in propertiesToSearch) {
    if (matchesAllWords(searchWords, property)) {
      console.log(property, propertiesToSearch[property]);
    }
  }
}

var propertiesToSearch = {
  "red apples": 1,
  "juicy fruit": 2
};

Answer 2

我认为您可能会从将数据结构从对象字面量转换为数组中受益，如下所示：

const wordGroupings = [
  'red apples',
  'juicy fruits'
];

我写了一个processString 函数，它接受一个字符串和一些词组作为输入，并返回一个词组的过滤列表，其中词组中的每个词都出现在输入字符串中。

换句话说，让我们假设测试字符串是：

const testString = 'I like big, frozen whales.';

让我们进一步想象您的 wordGroupings 数组看起来像这样：

const wordGroupings = [
  'whales frozen',
  'big frozen whales toucan',
  'big frozen',
  'sweaty dance club',
  'frozen whales big'
]

调用processString(wordGroupings, testString) 的输出将是：

[
  'whales frozen',
  'big frozen',
  'frozen whales big'
]

如果这是你要找的，这里是processString(..)的实现：

function processString(wordGroupings, testString) {
  var regexes = wordGroupings.map(words => ({
      origString: words,
      regex: new RegExp(words.replace(/\s+/g, '|'), 'g'),
      expCount: words.split(/\s+/g).length
    })
  );

  filtered = regexes.filter(({regex, expCount}) =>
    (testString.match(regex) || []).length === expCount
  );

  return filtered.map(dataObj => dataObj.origString);
}

希望这会有所帮助！