реакция-строка-замена не работает с регулярным выражением

Question

Я пытался использовать библиотеку response-string-replace , поскольку в React у нас есть ограниченный способ использования метода замены строк.

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

const str = 'Hey this a sample string.'
const result = reactStringReplace(str, '/(sample)/g', match => <span style={{fontStyle: 'italic'}}>{match}</span>)

Приведенный выше код не меняет стиль строки. но когда я удаляю регулярное выражение и помещаю простую строку, это работает.

const str = 'Hey this a sample string.'
const result = reactStringReplace(str, 'sample', match => <span style={{fontStyle: 'italic'}}>{match}</span>)

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

Answer 1

Вам необходимо удалить одинарные кавычки '' из семпла регулярного выражения.

Редактировать: вам нужно будет добавить key проп в вернул JSX, в противном случае вы получите Warning в вашем журнале: у каждого ребенка в списке должна быть уникальная «ключевая» опора.

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

const str = 'Hey this a sample string.'
const result = reactStringReplace(str, /(sample)/g, (match, i) => <span key={i} style={{fontStyle: 'italic'}}>{match}</span>)

---

На самом деле вам не нужно библиотека для этого, вы можете сделать это способом React, используя dangerouslySetInner HTML

function App() {
  const [text, setText] = React.useState("")

  const handleClick = () => {
    const str = "Hey this a sample string."
    // You'll need to use regular inline CSS
    const result = str.replace(
      "sample",
      '<span style="color:red">sample</span>'
    )

    setText(result)
  }

  return (
    <div className="App">
      <button onClick={handleClick}>Change text style</button>
      <br />
      <span dangerouslySetInnerHTML={{ __html: text }} />
    </div>
  )
}

ReactDOM.render( <App /> , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Подробнее о .replace () method

Answer 2

Не понимаю, зачем вам нужен специальный пакет, не так ли?

const str = 'Hey this a sample string.'
const patt = /(sample)/g
match = str.match(new RegExp(patt))

return <span style={{fontStyle: 'italic'}}>{match}</span>