Question

假设我有一个值数组，我需要根据 keyword 搜索过滤并返回所有值并返回 3 个结果。

var fruits = ["Banana", "Orange", "Apple", "Mango", "Peach"];

array = array.filter(item => {
    return item.toLowerCase().indexOf(term) > -1;
}).slice(0, 3)

我遇到的问题是加粗为每个项目搜索的词。例如，如果我搜索“a”，我应该返回一个 jsx 代码数组，其中每次在结果中列出“a”时，它都是粗体：

[
    <span>B<strong>a</strong>n<strong>a</strong>n<strong>a</strong></span>,
    <span>Or<strong>a</strong>nge</span>,
    <span><strong>A</strong>pple</span>
]

我尝试了一些效果：

array = array.map((item, index) => (
    <span>
        {item.split('a')} // then somehow join the a back with the strong tags
    </span>
));

也尝试过类似的东西，但返回值是字符串格式，据我所知无法转换为jsx：

array.map(item => {
    return item.replace(new RegExp('(' + term + ')', 'ig'), '<strong>$1</strong>');   
});

非常感谢任何帮助。

Answer 1

您非常接近，您需要检查数组的元素是否有搜索词，然后还将元素拆分为字母以匹配该词(https://stackblitz.com/edit/react-earc4c)

import React from 'react';

export default function App() {
  var fruits = ['Banana', 'Orange', 'Apple', 'Mango', 'Peach', 'Blueberry'];

  return (
    <div style={{ backgroundColor: 'palegoldenrod' }}>
      {fruits.map(fruit => {
        if (/a/.test(fruit)) {
          return (
            <p>
              {fruit.split('').map(letter => {
                if (letter === 'a') {
                  return <strong>{letter}</strong>;
                }

                return letter;
              })}
            </p>
          );
        }

        return fruit;
      })}
    </div>
  );
}

Answer 2

@hunter-mcmillen 为我指明了正确的方向，这让我找到了解决方案，所有功劳都归功于他！！！我可能稍微曲解了我的问题......如果它有字母“a”，我需要加粗。以下是我要找的，再次感谢猎人！！！

import React from 'react';

export default function App() {
  var fruits = ['Banana', 'Orange', 'Apple', 'Mango', 'Peach', 'Blueberry'];

  return (
    <div style={{ backgroundColor: 'palegoldenrod' }}>
      {fruits.map(fruit => {
        if (/a/.test(fruit)) {
          return (
            <p>
              {fruit.split(' ').map(word => {
                if (word.indexOf('a') != -1) {
                  return <strong>{word}</strong>;
                }

                return word;
              })}
            </p>
          );
        }

        return fruit;
      })}
    </div>
  );
}

Answer 3

我还想提一下我的一个朋友以不同的方式解决了这个问题：

let term = 'apple orange banana';
  let search = 'a';
  
  let parts = term.split(search);
  
  return parts.map((item, i) => (
    <>{item && <strong>{item}</strong>}{(i !== parts.length - 1) ? search : null}</>
  ))

React：如何根据关键字将字符串数组中的单词加粗

3 个答案: