JavaScript 以字符开头或包含字符的字符串的正则表达式
[英]JavaScript regular expression for string that starts with a character(s) or contains character(s)
问题描述
我正在查询一个 json 文件，其中包含自动完成搜索输入字段的配方。 举个例子，假设有人正在搜索鱼的食谱。 当用户键入f时，结果应该是（10 个对象的数组）：
0: {label: 'fig', value: 'fig'}
1: {label: 'fish', value: 'fish'}
2: {label: 'flax', value: 'flax'}
3: {label: 'flour', value: 'flour'}
4: {label: 'fruit', value: 'fruit'}
5: {label: 'farro', value: 'farro'}
6: {label: 'fudge', value: 'fudge'}
7: {label: 'fries', value: 'fries'}
8: {label: 'frank', value: 'frank'}
9: {label: 'fennel', value: 'fennel'}
所以 10 个以f开头的对象（单个单词）
现在，当用户输入fi时，结果应该是：
0: {label: 'fig', value: 'fig'}
1: {label: 'fish', value: 'fish'}
2: {label: 'fig jam', value: 'fig jam'}
3: {label: 'fish stock', value: 'fish stock'}
4: {label: 'filo dough', value: 'filo dough'}
5: {label: 'firm tofu', value: 'firm tofu'}
6: {label: 'file powder', value: 'file powder'}
7: {label: 'filet mignon', value: 'filet mignon'}
8: {label: 'fillo shells', value: 'fillo shells'}
9: {label: 'five spice powder', value: 'five spice powder'}
因此，在某些情况下，以fi开头的 10 个对象又超过 1 个单词。
现在，当用户键入fis时，结果应该是：
0: {label: 'fish', value: 'fish'}
1: {label: 'fish stock', value: 'fish stock'}
2: {label: 'fish seasoning', value: 'fish seasoning'}
3: {label: 'fish roe', value: 'fish roe'}
4: {label: 'Fischsoße', value: 'Fischsoße'}
5: {label: 'Fischflocken', value: 'Fischflocken'}
6: {label: 'cod fish', value: 'cod fish'}
7: {label: 'cat fish', value: 'cat fish'}
8: {label: 'rock fish', value: 'rock fish'}
9: {label: 'thai fish sauce', value: 'thai fish sauce'}
现在我们看到以fis开头的词，复合词，如Fischflocken和fis在结果中间或末尾的词，如thai fish sauce或cat fish 。
最后，如果我们写下整个鱼字，我们应该得到以下结果：
0: {label: 'fish', value: 'fish'}
1: {label: 'fish stock', value: 'fish stock'}
2: {label: 'fish seasoning', value: 'fish seasoning'}
3: {label: 'fish roe', value: 'fish roe'}
4: {label: 'Fish Sauce', value: 'Fish Sauce'}
5: {label: 'catfish', value: 'catfish'}
6: {label: 'codfish', value: 'codfish'}
7: {label: 'redfish', value: 'redfish'}
8: {label: 'crawfish', value: 'crawfish'}
9: {label: 'monkfish', value: 'monkfish'}
这或多或少是我上面描述的。
我使用 filter 方法，我正在寻找能够产生这种行为的正则表达式。 按照我的理解，表达式应该测试/匹配用户提供的字符是否与我们查询的字符串的开头相匹配，或者它们是否包含它，无论是作为一个完整的单词还是一个复合词。 这应该是搜索的顺序。
如果有人可以帮助我，那就太好了，如果提供正则表达式的解释，那就更好了。 谢谢您阅读此篇。
3 个解决方案
解决方案1
0 2022-03-29 12:00:46
这将按照您寻找的方式对结果进行排序和过滤。
没有 1 个正则表达式可以处理您要查找的排序，因此该解决方案有两个，一个搜索开头，一个搜索所有内容，然后合并结果。
const allData = [ {label: 'fish', value: 'fish'}, {label: 'fish stock', value: 'fish stock'}, {label: 'fish seasoning', value: 'fish seasoning'}, {label: 'fish roe', value: 'fish roe'}, {label: 'Fischsoße', value: 'Fischsoße'}, {label: 'Fischflocken', value: 'Fischflocken'}, {label: 'cod fish', value: 'cod fish'}, {label: 'cat fish', value: 'cat fish'}, {label: 'rock fish', value: 'rock fish'}, {label: 'thai fish sauce', value: 'thai fish sauce'} ] function escapeRegExp(text) { return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); } const search = (str) => { const startingWithSet = new Set() const startingWithRegex = new RegExp('^' + escapeRegExp(str), 'i'); const startingWithSearch = allData.filter(({ value }) => { const matches = startingWithRegex.test(value) if (matches) startingWithSet.add(value) return matches }) const includesRegex = new RegExp(escapeRegExp(str), 'ig') const includesSearch = allData.filter(({ value }) =>.startingWithSet.has(value) && includesRegex.test(value)) console.log([..,startingWithSearch. ...includesSearch ]) } search("c")
解决方案2
0 2022-03-29 12:01:15
const arr = [ { label: 'fig', value: 'fig' }, { label: 'fish', value: 'fish' }, { label: 'flax', value: 'flax' }, { label: 'flour', value: 'flour' }, { label: 'fruit', value: 'fruit' }, { label: 'farro', value: 'farro' }, { label: 'fudge', value: 'fudge' }, { label: 'fries', value: 'fries' }, { label: 'frank', value: 'frank' }, { label: 'fennel', value: 'fennel' }, { label: 'crawfish', value: 'crawfish' }, { label: 'cat fish', value: 'cat fish' }, { label: 'fish sauce', value: 'fish sauce' }, ]; const filterFromInput = (input) => { const regex = new RegExp(`${input}`, 'gi'); return arr.filter((item) => item.label.match(regex)); }; console.log(filterFromInput('fish'));
解决方案3
0 2022-03-30 04:59:11
键入时加载文本区域
HTML：
<html>
<body>
<input type="text" id="in" placeholder="enter here" oninput="filterInput();" />
<textarea id='txt' rows="12" cols="35" placeholder="Data Displays here."></textarea>
</body>
</html>
js:
window.onload = function() {
document.getElementById("in").value = ""
}
function filterInput() {
const s = document.getElementById("in").value;
const arr = [
{ label: 'fig', value: 'fig' },
{ label: 'fish', value: 'fish' },
{ label: 'flax', value: 'flax' },
{ label: 'flour', value: 'flour' },
{ label: 'fruit', value: 'fruit' },
{ label: 'farro', value: 'farro' },
{ label: 'fudge', value: 'fudge' },
{ label: 'fries', value: 'fries' },
{ label: 'frank', value: 'frank' },
{ label: 'fennel', value: 'fennel' },
{ label: 'crawfish', value: 'crawfish' },
{ label: 'cat fish', value: 'cat fish' },
{ label: 'fish sauce', value: 'fish sauce' },
];
const regex = new RegExp(`${s}`, 'gi');
document.getElementById('txt').value = arr.filter((item) => item.label.match(regex)).map(obj => obj.value).join('\n');
}
用户界面图片
替换以特定字符开头并以正则表达式中的特定字符结尾的字符串
[英]Replace string that starts with specific character and ends with specific character in regular expression
JavaScript正则表达式检查单个特殊字符是否在字符串中出现一次
[英]JavaScript regular expression to check single special character to occur once in a string
JavaScript简单正则表达式-将字符串限制为第一个字符完全为“＃”
[英]JavaScript simple regular expression - limit string to have exactly '#' as first character
Javascript正则表达式来检查一个字符串是否是某个字符的组合
[英]Javascript regular expression to check whether a string is a combination of certain character
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.