反应突出显示查询[关闭]

Question

我正在制作一个建议组件，我需要突出显示与查询匹配的建议部分（就像 duckduck.go 一样）。

当前逻辑：

function Highlight({ text = '', highlight = '' }) {
  const regex = new RegExp(`(${highlight})`, 'gi');
  const split = text.split(regex);
  return (
    <span>
      {split
        .filter((current) => current)
        .map((current, i) => (regex.test(current) ? <span key={i}>{current}</span> : <em>key={i}>{current}</em>))}
    </span>
  );
}

例如
建议：美国、联合航空公司
查询：联合 美国 美国/United Airlines ## 工作正常
查询：United St United States / United Airlines ## 工作不正常
期待：United St ==> United States & United Airlines
期待：nited St ==> United States & United Airlines
期待：Unit St ==> United States 和联合航空公司

Answer 1

已修复。

更改：

const regex = new RegExp(`(${highlight})`, 'gi');

到

const regex = new RegExp(
    `\\b(${escapeRegExp(phrase)
      .trim()
      .split(' ')
      .filter((t) => t)
      .join('|')})`,
    'gi'
  );

 1. (\\b(${escapeRegExp(phrase).trim().split(' ').filter((t) =>
    t).join('|')})`,'gi');                                     ===> left side must match

 2.  (${escapeRegExp(phrase).trim().split(' ').filter((t) =>
    t).join('|')})\\b`,'gi');                                  ===> right side must match 

 3. (\\b(${escapeRegExp(phrase).trim().split(' ').filter((t) =>
    t).join('|')})\\b`,'gi');                                  ===> both sides must match

 4. ((${escapeRegExp(phrase).trim().split(' ').filter((t) =>
    t).join('|')})`,'gi');                                     ===> neither side has to match

Answer 2

我刚刚写了一个符合你要求的函数

请注意此函数区分大小写 打字稿

const highLight = (
  query: string, // The Query
  suggestion: string, // The Suggestion
  tag: string = "strong"
): string => {
  const querySplit = query.split(" ");
  const suggestionSplit = suggestion.split(" ");

  let res: string = "";
  let matchFullFirst = false; // This Variable track if the first Word is a complete match 

  for (let i = 0; i < querySplit.length && i < suggestionSplit.length; i++) {
    if (suggestionSplit[i].startsWith(querySplit[i])) {
      if (i == 0 && suggestionSplit[i].length === querySplit[i].length) {
        matchFullFirst = true;
      }

      res += ` <${tag}>${querySplit[i]}</${tag}>${suggestionSplit[i].slice(
        querySplit[i].length
      )}`;
      continue;
    }

    if (matchFullFirst) {
      res += suggestion.slice(querySplit[0].length);
      break;
    }
    res = suggestion;
    break;
  }
  return res;
};

Javascript

  const highLight = (query, suggestion, tag = "strong") => {
  const querySplit = query.split(" ");
  const suggestionSplit = suggestion.split(" ");

  let res = "";
  let matchFullFirst = false;
  
  for (let i = 0; i < querySplit.length && i < suggestionSplit.length; i++) {
    if (suggestionSplit[i].startsWith(querySplit[i])) {
      if (i == 0 && suggestionSplit[i].length === querySplit[i].length) {
        matchFullFirst = true;
      }

      res += ` <${tag}>${querySplit[i]}</${tag}>${suggestionSplit[i].slice(
        querySplit[i].length
      )}`;
      continue;
    }

    if (matchFullFirst) {
      res += suggestion.slice(querySplit[0].length);
      break;
    }
    res = suggestion;
    break;
  }
  return res;
};