JS中模糊查询功能的一些常用方法

let str = 'hello world';
let target = 'lo';

if (str.indexOf(target) >= 0) {
  console.log('找到了目标字符串');
} else {
  console.log('未找到目标字符串');
}

let str = 'hello world';
let target = /lo/;

let result = str.match(target);

if (result && result.length > 0) {
  console.log('找到了目标字符串');
} else {
  console.log('未找到目标字符串');
}

<div class="search-box">
  <input type="text" id="search-input">
  <button id="search-btn">搜索</button>
</div>

<div class="search-result">
  <ul id="result-list"></ul>
</div>

// 获取页面中的input框
			let input = document.getElementById('search-input');
			// 获取页面中的按钮
			let button = document.getElementById('search-btn');
			// 获取页面中的ul
			let list = document.getElementById('result-list');
			// 给input框绑定oninput监听事件
			input.addEventListener('input', function() {
				// 设置一个变量为input输入框中的值
				let keyword = input.value;
				// 创建一个有数据的数组
				let data = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
				// 创建一个空数据，用来存放筛选后的结果
				let result = [];
				// 遍历data
				data.forEach(function(item) {
					// 检查每一个keyword的值是否大于等于 0
					if (item.indexOf(keyword) >= 0) {
						// 如果keyword的值大于等于0，就把这个元素添加到result的数组中
						result.push(item);
					}
				});
				// 调用渲染result的函数
				renderResult(result);
			});
			// 渲染result
			function renderResult(data) {
				// 声明一个空字符串
				let html = '';
				// 遍历data
				data.forEach(function(item) {
					// 空字符串+=li该元素
					html += '<li>' + item + '</li>';
				});
				// ul中的内容等于这个字符串
				list.innerHTML = html;
			}

<div class="list-box">
  <input type="text" id="filter-input">
  <ul id="list">
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
    <li>grape</li>
    <li>watermelon</li>
  </ul>
</div>

// 获取页面中的input
			let input = document.getElementById('filter-input');
			// 获取页面中的ul
			let list = document.getElementById('list');
			// 给input添加input事件监听
			input.addEventListener('input', function() {
				// 转换input大写为小写，并将其赋予给变量
				let keyword = input.value.toLowerCase();
				// 获取list下的所有li标签
				let items = list.getElementsByTagName('li');
				//将items转化为真正的数组并遍历 
				Array.prototype.forEach.call(items, function(item) {
					// 转换item中文本的大小写
					let text = item.innerText.toLowerCase();
					// 如果text中keyword大于等于0
					if (text.indexOf(keyword) >= 0) {
						// 显示item
						item.style.display = 'block';
					} else {
						// 否则隐藏item
						item.style.display = 'none';
					}
				});
			});