Как я могу выделить часть текста в React. js?

Question

Я создаю поисковый компонент, и для каждого возможного автоматического предложения я хотел бы выделить место, где появляется искомый термин.

Я нашел это , и у меня есть пытался использовать регулярные выражения для достижения желаемого результата, но я думаю, что что-то в том, как работают компоненты, мешает его работе, и я не могу понять, как заставить его работать.

Вот что я пытаюсь делать:

var reg = new RegExp(searchTerm, "gi");


return (
  <div className="single-result">
      {result.name.replace(reg, searchTerm => {
        return <div className="single-result__bold"> {searchTerm}</div>;
      })}
  </div>
);

Но то, что я получаю, выглядит так:

[object Object]A[object Object]d[object Object]a[object Object]l[object Object]i[object Object]n[object Object]e[object Object] [object Object]A[object Object]r[object Object]r[object Object]a[object Object]u[object Object]l[object Object]t[object Object]

Answer 1

Функция replace не создана для использования с JSX и преобразует ваши виртуальные узлы DOM в строки.

Эта перегрузка string.replace ожидает, что ее второй аргумент будет функцией, возвращающей строку ( и если нет, он преобразует его в строку). В этом случае вы возвращаете узел JSX из этой функции, который отображается как [object Object], когда он проходит через .toString() - функция replace затем соединяет несопоставленные строки с выходными данными функции, которая является строкой Вы показываете выше. Эта хитрая строка - это то, что выводится в React, и вот что она отображает.

Вместо этого вы можете использовать повторные вызовы к string.search (или на более низком уровне, regex.match), чтобы узнать индекс каждого совпадения (и самих совпадений), а затем выведите массив несопоставленного текста и узлов DOM для сопоставленного текста.

Такой массив может выглядеть следующим образом:

[
   "This text surrounds a ",
   <div className="single-result__bold">match</div>,
   ", but is still in a normal text node"
];

приведенный выше массив может быть отображен в реагировать / JSX и будет отображаться так, как вы ожидаете.

Answer 2

Я думаю, вы можете использовать react-string-replace вот так:

const generateHighlightedText = (caption, searchValue) =>
  searchValue
    ? reactStringReplace(caption, searchValue, (match, i) => (
        <Highlighted key={i}>{match}</Highlighted>
      ))
    : caption;

ссылка: https://github.com/iansinnott/react-string-replace