React：如何根据关键字在字符串数组中加粗单词答案

【问题标题】：React: How to bold words in an array of strings based on keywordReact：如何根据关键字在字符串数组中加粗单词
【发布时间】：2021-08-05 03:08:53
【问题描述】：

假设我有一个值数组，我需要过滤并返回基于 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>');   
});

非常感谢任何帮助。

【问题讨论】：

从技术上讲，您可以使用dangerouslySetInnerHTML 将字符串转换为 DOM 元素。

标签： javascript arrays reactjs jsx

【解决方案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>
  );
}

【讨论】：

非常感谢...您解决它的方式帮助我解决了我遇到的问题。

【解决方案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>
  );
}

【讨论】：

【解决方案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}</>
  ))

【讨论】：