假设我有一个值数组,我需要根据 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>');
});
非常感谢任何帮助。
答案 0 :(得分: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>
);
}
答案 1 :(得分:0)
@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>
);
}
答案 2 :(得分:0)
我还想提一下我的一个朋友以不同的方式解决了这个问题:
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}</>
))