第 90 题：实现模糊搜索结果的关键词高亮显示 #141

yygmind · 2019-06-16T15:01:59Z

lhyt · 2019-06-16T17:29:20Z

考虑节流、缓存。其实还可以上列表diff+定时清理缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>auto complete</title>
  <style>
    bdi {
      color: rgb(0, 136, 255);
    }

    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <input class="inp" type="text">
  <section>
    <ul class="container"></ul>
  </section>
</body>
<script>

  function debounce(fn, timeout = 300) {
    let t;
    return (...args) => {
      if (t) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        fn.apply(fn, args);
      }, timeout);
    }
  }

  function memorize(fn) {
    const cache = new Map();
    return (name) => {
      if (!name) {
        container.innerHTML = '';
        return;
      }
      if (cache.get(name)) {
        container.innerHTML = cache.get(name);
        return;
      }
      const res = fn.call(fn, name).join('');
      cache.set(name, res);
      container.innerHTML = res;
    }
  }

  function handleInput(value) {
    const reg = new RegExp(`\(${value}\)`);
    const search = data.reduce((res, cur) => {
      if (reg.test(cur)) {
        const match = RegExp.$1;
        res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
      }
      return res;
    }, []);
    return search;
  }
  
  const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const container = document.querySelector('.container');
  const memorizeInput = memorize(handleInput);
  document.querySelector('.inp').addEventListener('input', debounce(e => {
    memorizeInput(e.target.value);
  }))
</script>
</html>

5SSS · 2019-06-17T03:17:33Z

我的大概思路是，用正则替换掉关键词。

let panter = new RegExp(关键词, 'g')
该行字符串.replace(panter, '<b style="color: #2D7BFF">' + 关键词 + '</b>')

ps:如果是vue项目，直接与v-html结合使用更爽哦~

foolmadao · 2019-06-17T03:36:47Z

实现不难，写一个pipe做统一的转换会让代码看起来更加简洁

<ul>
  <li *ngFor="let data of mockData">
    <span innerHTML="{{data.name | highLight: target}}"></span>
  </li>
</ul>

ouyinheng · 2019-07-12T02:06:23Z

<div class="input">
    <input type="text" oninput="search(event)">
    <ul class="options"></ul>
</div>

<script>
    const list = ['上海', '上海市', '上海海昌海洋公园', '上海市徐汇区', '上海自来水来自海上'];

    function setList(value) {
      const ul = document.querySelector('.options');
      ul.innerHTML = '';
      if (!value) {
        ul.innerHTML = '';
        return;
      }
      list.forEach((item, index) => {
        if (item.indexOf(value) !== -1) {
          const li = document.createElement('li');
          const innerHtml = item.replace(value, `<span style="color:red">${value}</span>`);
          console.log(innerHtml)
          li.innerHTML = innerHtml;
          li.setAttribute('key', index);
          ul.appendChild(li);
        }
      })
    }

    function search(e) {
      const value = e.target.value;
      setList(value)
    }
</script>

sailei1 · 2019-07-18T08:59:39Z

直接把输入的字符变蓝，服务端返回的数据把输入字符替换掉，然后追加后面那部分显示。
没有结果的时候做一下判断。

qinshenxue · 2019-07-23T01:08:49Z

我的大概思路是，用正则替换掉关键词。
let panter = new RegExp(关键词, 'g')
该行字符串.replace(panter, '' + 关键词 + '')
ps:如果是vue项目，直接与v-html结合使用更爽哦~

new RegExp 要注意排除有正则含义的字符，比如用户输入 ^ $ 等。

hviwen · 2019-07-24T02:06:29Z

用关键词去切分搜索结果为3段
export const keyWordHeightLight = (item, value) => {
const mIdx = item.indexOf(value)
const first = mIdx >= 0 ? mIdx : item.length
const second = value.length

let _head = item.substr(0, first)
let _heightLight = item.substr(first, second)
let _foot = item.substr(second + mIdx, item.length)

return _head + ${_heightLight} + _foot
}

zzNire · 2019-08-14T07:39:02Z

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'>   
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var myitem = {
        template:`<div class='item'>
            <p v-html="info.name"></p>
        </div>`,
        props:{
            info:{
                type:Object,
                default:()=>{return {}},
            }
        }

    }
    var vm = new Vue({
        el:'#app',
        template:`
        <div>
            <input @input='inputSearchText'>
            <myitem v-for='info in results' :key='info.name' :info='info'></item>
        </div>
        `,
        data(){
            return {
                infos:[
                    {name:'地铁1',},
                    {name:'地铁6',},
                    {name:'地铁7',},
                    {name:'地铁10',},
                    {name:'地铁11',},
                    {name:'公交112',},
                    {name:'公交597',},
                    {name:'公交593',}, 
                ],
                results:[],
            }
        },
        created() {
            this.results = JSON.parse(JSON.stringify(this.infos));
        },
        methods: {
            inputSearchText : (function(timeout){
                var timer;
                return function(e){
                    if(timer){
                        clearTimeout(timer);
                    }
                    timer = setTimeout(() => {
                        this.search(e.target.value);
                        //this.search_text = e.target.value
                    }, timeout);
                }
            })(1000),
            search(text){
                var reg = RegExp(`(${text})`);
                var results = JSON.parse(JSON.stringify(this.infos));
                var matches = results.filter(info=>info.name.match(reg));
                matches.forEach(info=>{
                    info.name = info.name.replace(reg,`<span class='highlight'>$1</span>`
                )});
                this.results = matches;
                console.log(this.results);
            }
        },
        components:{
            myitem,
        },
    })
</script>
<style>
.highlight{
    color:red;
}
</style>
</html>

pagemarks · 2019-08-15T10:54:56Z

export function addMark(q, val) {
    if (/^[\w\s\+\-]+$/.test(q)) {
        let reg = q;
        if (/(\s-|-\s)+[^\s-]/.test(q)) {
            reg = q.split(/(\s-|-\s)/)[0];
        } else if (/[\s+]+[^\s+]/.test(q)) {
            reg = q.replace(/([\s+]+)/, '|');
        }
        reg = new RegExp(`(${reg})`,'igm');
        return val.replace(reg,`<b>$1</b>`)
    } else {
        return val.replace(q,`<b>${q}</b>`)
    }
}

个人网站在我看到此题前实现了一个,为纯英文时,需要注意不区分大小写.返回值通过vue v-html渲染
搜索支持简单布尔运算

key1 key2: 搜索包含key1或key2的条目
key1 + key2: 搜索即包含key1又包含key2的条目
key1 - key2: 搜索只包含key1不包含key2的条目

SoftwareEngineerPalace · 2019-08-27T14:27:15Z

考虑节流、缓存。其实还可以上列表diff+定时清理缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>auto complete</title>
  <style>
    bdi {
      color: rgb(0, 136, 255);
    }

    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <input class="inp" type="text">
  <section>
    <ul class="container"></ul>
  </section>
</body>
<script>

  function debounce(fn, timeout = 300) {
    let t;
    return (...args) => {
      if (t) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        fn.apply(fn, args);
      }, timeout);
    }
  }

  function memorize(fn) {
    const cache = new Map();
    return (name) => {
      if (!name) {
        container.innerHTML = '';
        return;
      }
      if (cache.get(name)) {
        container.innerHTML = cache.get(name);
        return;
      }
      const res = fn.call(fn, name).join('');
      cache.set(name, res);
      container.innerHTML = res;
    }
  }

  function handleInput(value) {
    const reg = new RegExp(`\(${value}\)`);
    const search = data.reduce((res, cur) => {
      if (reg.test(cur)) {
        const match = RegExp.$1;
        res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
      }
      return res;
    }, []);
    return search;
  }
  
  const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const container = document.querySelector('.container');
  const memorizeInput = memorize(handleInput);
  document.querySelector('.inp').addEventListener('input', debounce(e => {
    memorizeInput(e.target.value);
  }))
</script>
</html>

应用用节流还是防抖？

callmezhenzhen · 2019-09-03T01:46:55Z

debounce

debounce不是防抖么？

fireairforce · 2019-11-19T07:48:24Z

mark一下，这个问题真的有意思

Jmingzi · 2019-11-27T02:33:04Z

处理中文输入，再加个防抖。如果用数据驱动视图，可以“原地复用”，才是最优解。

<body>
    <input id="input" type="text" />
    <div id="box"></div>
    <script>
      let list = [
        { id: 1, name: "部门A", parentId: 0 },
        { id: 2, name: "部门B", parentId: 0 },
        { id: 3, name: "部门C", parentId: 1 },
        { id: 4, name: "部门D", parentId: 1 },
        { id: 5, name: "部门E", parentId: 2 },
        { id: 6, name: "部门F", parentId: 3 },
        { id: 7, name: "部门G", parentId: 2 },
        { id: 8, name: "部门H", parentId: 4 }
      ];
      input.addEventListener("input", handleSearch);
      input.addEventListener("compositionstart", handleStart);
      input.addEventListener("compositionend", handleEnd);

      function regLikeSearch(str) {
        let htmls = "";
        list.forEach(item => {
          const match = item.name.replace(
            new RegExp(str, "ig"),
            (all, match) => {
              return `<span style="color: red">${all}</span>`;
            }
          );
          htmls += `<p>${match}</p>`;
        });
        box.innerHTML = htmls;
      }

      let isZhcn = false;
      function handleSearch(e) {
        if (!isZhcn) {
          const val = e.target.value;
          console.log("handleSearch", val);
          regLikeSearch(val);
        }
      }
      function handleStart(e) {
        isZhcn = true;
      }
      function handleEnd(e) {
        isZhcn = false;
        handleSearch(e);
      }
    </script>
  </body>

lightYourFire · 2020-01-18T08:07:09Z

我的大概思路是，用正则替换掉关键词。
let panter = new RegExp(关键词, 'g')
该行字符串.replace(panter, '' + 关键词 + '')
ps:如果是vue项目，直接与v-html结合使用更爽哦~
缺点就是： v-html有XSS 攻击问题

chenweihuan · 2020-02-14T04:05:09Z

我的大概思路是，用正则替换掉关键词。
let panter = new RegExp(关键词, 'g')
该行字符串.replace(panter, '' + 关键词 + '')
ps:如果是vue项目，直接与v-html结合使用更爽哦~
缺点就是： v-html有XSS 攻击问题

v-html的xss攻击这样这样解决？

<template>
  <div id="app" v-html="fixVHTMLXSS(text)"></div>
</template>
<script>
export default {
  data () {
    return {
      text: '<span style="color:red">1111111</span>'
    }
  },
  methods: {
    fixVHTMLXSS (str) {
      return (str || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }
  }
}
</script>

hduhdc · 2020-04-03T01:58:51Z

考虑节流、缓存。其实还可以上列表diff+定时清理缓存

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>auto complete</title>
  <style>
    bdi {
      color: rgb(0, 136, 255);
    }

    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <input class="inp" type="text">
  <section>
    <ul class="container"></ul>
  </section>
</body>
<script>

  function debounce(fn, timeout = 300) {
    let t;
    return (...args) => {
      if (t) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        fn.apply(fn, args);
      }, timeout);
    }
  }

  function memorize(fn) {
    const cache = new Map();
    return (name) => {
      if (!name) {
        container.innerHTML = '';
        return;
      }
      if (cache.get(name)) {
        container.innerHTML = cache.get(name);
        return;
      }
      const res = fn.call(fn, name).join('');
      cache.set(name, res);
      container.innerHTML = res;
    }
  }

  function handleInput(value) {
    const reg = new RegExp(`\(${value}\)`);
    const search = data.reduce((res, cur) => {
      if (reg.test(cur)) {
        const match = RegExp.$1;
        res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
      }
      return res;
    }, []);
    return search;
  }
  
  const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const container = document.querySelector('.container');
  const memorizeInput = memorize(handleInput);
  document.querySelector('.inp').addEventListener('input', debounce(e => {
    memorizeInput(e.target.value);
  }))
</script>
</html>

厉害，但是有点就是我看到实现的debounce是防抖，确实是使用防抖不能使用节流，只是最上面的文案是要修改一手。赞

xiaochen-01 · 2020-04-22T13:22:33Z

function debounceFunc (fn, delay) {
    let lastTime = 0;
    let timer = null;
    return function (event) {
        let now = +(new Date());
        clearTimeout(timer)
        timer = setTimeout(function () {
            fn.call(event);
        }, delay);
        if (now - lastTime < delay) {
            lastTime = now;
        }
    }
}

function getResult(str) {
    return str.trim() ? list.filter(item => item.address.includes(str))
                .map(item => {
                    return {
                        ...item,
                        address: item.address.replace(str, `<span style="color:#31b0d5">${str}</span>`)
                    }
                }) : [];
}

function renderUl(lis) {
    ul.innerHTML = lis.map(item => `<li>${item.address}</li>`).join('')

}

myzhoulang · 2020-06-24T11:56:04Z

function a(str, childStr){
const arr = str.split(childStr)
return arr.join(${childStr})
}

523451928 · 2020-07-14T06:09:51Z

function queryStr(str, query) {
  let result
  const index = str.indexOf(query)
  if (index !== -1) {
    result = `${str.substr(0, index)}<span style="color: red;">${query}</span>${str.substr(index + query.length)}`
  } else {
    result = str
  }
  return result
}
queryStr('hello world', 'r')

UzumakiHan · 2021-04-16T07:04:25Z

这不是防抖吗？ @lhyt

LXhby · 2021-05-18T03:10:56Z

结合输入中文:compisitionsart compositionend

<body>
  <input type="text" class="box">
  <ul class="txt"></ul>
</body>
<script>
  let ipt = document.querySelector('.box')
  let txt = document.querySelector('.txt')
  console.log('txt', txt)

  const list = ['上海', '上海市', '上海海昌海洋公园', '上海市徐汇区', '上海自来水来自海上'];
  ipt.addEventListener('input', function (e) {
    if (e.target.composing) {
      return
    }

    txt.innerHTML = '';
    list.forEach(item => {
      if (item.indexOf(ipt.value) != -1) {
        let li = document.createElement('li')
        const innerHtml = item.replace(ipt.value, `<span style="color:red">${ipt.value}</span>`)
        console.log('innerHtml', innerHtml)
        li.innerHTML = innerHtml;
        txt.appendChild(li)
      }
    })
  })
  ipt.addEventListener('compositionstart', function (e) {
    e.target.composing = true
  })
  ipt.addEventListener('compositionend', function (e) {
    e.target.composing = false;
    let event = document.createEvent('HTMLEvents')
    event.initEvent('input')
    e.target.dispatchEvent(event);
  })
</script>

tustzdm · 2021-06-05T08:25:08Z

我的大概思路是，用正则替换掉关键词。
let panter = new RegExp(关键词, 'g')
该行字符串.replace(panter, '' + 关键词 + '')
ps:如果是vue项目，直接与v-html结合使用更爽哦~

let panter = new RegExp(关键词, 'ig')
replace(panter, matchValue => ${matchValue});
正则忽略大小写，然后replace第二个参数用函数更佳哈

zhujianxiong · 2021-06-20T07:35:51Z

在这里我有个问题，如果是富文本编辑器返回的内容，如何高亮选中，然后后端怎么在查找的时候，帅选掉那些标签呢

q673115816 · 2021-08-09T02:08:55Z

'变蓝变红变绿变蓝变'.match(/(变蓝)|((?!变蓝).)+/g)

goldEli · 2022-01-27T08:11:57Z

React 版本

import { useEffect, useRef, useState } from "react";

const allData = ["asdew", "aedf", "123", "asdf"];

export default function App() {
  const [inputVal, setInputVal] = useState("");
  const data = useData(inputVal);

  return (
    <div className="App">
      <input
        value={inputVal}
        onChange={(e) => {
          const text = e.target.value;
          setInputVal(text);
        }}
      />
      <ul>
        {data.map((dataItem) => {
          return (
            <li>
              {dataItem.split("").map((item) => {
                return (
                  <span style={{ color: inputVal.includes(item) ? "red" : "" }}>
                    {item}
                  </span>
                );
              })}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

const useData = (value) => {
  const val = useDebounce(value, 500);
  const [data, setData] = useState([]);
  useEffect(() => {
    if (!val) {
      setData([]);
      return;
    }
    setData(allData.filter((item) => item.includes(val)));
  }, [val]);
  return data;
};

const useDebounce = (value, interval = 1000) => {
  const [data, setData] = useState(value);
  const timer = useRef(null);

  useEffect(() => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      setData(value);
    }, interval);
    return () => {
      clearTimeout(timer.current);
    };
  }, [value, interval]);

  return data;
};

XW666 · 2023-05-30T08:47:57Z

 const datas = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const inputSearchText = (val) => {
    let reg = new RegExp(val)
    let arr = []
    for (let c of datas) {
      if (reg.test(c)) {
        let s = c.replace(val, `<span style="color:#31b0d5">${val}</span>`)
        arr.push(s)
      }
    }
    console.log('结果', arr)
  }
  inputSearchText('野生')

yygmind mentioned this issue Jul 14, 2019

前端 100 问：能搞懂80%的请把简历给我 yygmind/blog#43

Open

xuyaodegithub mentioned this issue Aug 29, 2019

考虑防抖、缓存。其实还可以上列表diff+定时清理缓存 #261

Closed

yygmind added the 编程题 label Dec 16, 2019

hanyueqiang mentioned this issue Jan 6, 2021

实现模糊搜索结果的关键词高亮显示 hanyueqiang/frontEnd_book#44

Open

yanyue404 mentioned this issue Apr 11, 2024

面试问别人的一些问题 yanyue404/blog#151

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

第 90 题：实现模糊搜索结果的关键词高亮显示 #141

第 90 题：实现模糊搜索结果的关键词高亮显示 #141

yygmind commented Jun 16, 2019 •

edited

Loading

lhyt commented Jun 16, 2019

5SSS commented Jun 17, 2019 •

edited

Loading

foolmadao commented Jun 17, 2019 •

edited

Loading

ouyinheng commented Jul 12, 2019

sailei1 commented Jul 18, 2019 •

edited

Loading

qinshenxue commented Jul 23, 2019

hviwen commented Jul 24, 2019

zzNire commented Aug 14, 2019

pagemarks commented Aug 15, 2019 •

edited

Loading

SoftwareEngineerPalace commented Aug 27, 2019

callmezhenzhen commented Sep 3, 2019

fireairforce commented Nov 19, 2019

Jmingzi commented Nov 27, 2019

lightYourFire commented Jan 18, 2020

chenweihuan commented Feb 14, 2020

hduhdc commented Apr 3, 2020

xiaochen-01 commented Apr 22, 2020

myzhoulang commented Jun 24, 2020

523451928 commented Jul 14, 2020

UzumakiHan commented Apr 16, 2021

LXhby commented May 18, 2021 •

edited

Loading

tustzdm commented Jun 5, 2021

zhujianxiong commented Jun 20, 2021

q673115816 commented Aug 9, 2021

goldEli commented Jan 27, 2022 •

edited

Loading

XW666 commented May 30, 2023

第 90 题：实现模糊搜索结果的关键词高亮显示 #141

第 90 题：实现模糊搜索结果的关键词高亮显示 #141

Comments

yygmind commented Jun 16, 2019 • edited Loading

lhyt commented Jun 16, 2019

5SSS commented Jun 17, 2019 • edited Loading

foolmadao commented Jun 17, 2019 • edited Loading

ouyinheng commented Jul 12, 2019

sailei1 commented Jul 18, 2019 • edited Loading

qinshenxue commented Jul 23, 2019

hviwen commented Jul 24, 2019

zzNire commented Aug 14, 2019

pagemarks commented Aug 15, 2019 • edited Loading

SoftwareEngineerPalace commented Aug 27, 2019

callmezhenzhen commented Sep 3, 2019

fireairforce commented Nov 19, 2019

Jmingzi commented Nov 27, 2019

lightYourFire commented Jan 18, 2020

chenweihuan commented Feb 14, 2020

hduhdc commented Apr 3, 2020

xiaochen-01 commented Apr 22, 2020

myzhoulang commented Jun 24, 2020

523451928 commented Jul 14, 2020

UzumakiHan commented Apr 16, 2021

LXhby commented May 18, 2021 • edited Loading

tustzdm commented Jun 5, 2021

zhujianxiong commented Jun 20, 2021

q673115816 commented Aug 9, 2021

goldEli commented Jan 27, 2022 • edited Loading

React 版本

XW666 commented May 30, 2023

yygmind commented Jun 16, 2019 •

edited

Loading

5SSS commented Jun 17, 2019 •

edited

Loading

foolmadao commented Jun 17, 2019 •

edited

Loading

sailei1 commented Jul 18, 2019 •

edited

Loading

pagemarks commented Aug 15, 2019 •

edited

Loading

LXhby commented May 18, 2021 •

edited

Loading

goldEli commented Jan 27, 2022 •

edited

Loading