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

Question

Я получаю слова регулярного выражения, которые мне нужно заменить на тег ввода.Но когда я добавляю html, он читается как обычная строка.
Вот моя строка: «Здравствуйте, меня зовут / # Ann # /. Я работаю на / # IStaff # /, не могли бы вы мне позвонитьназад».Где я делаю ошибку?

editModalText() {
  const { modalMessage } = this.state
  let regex = /\/#(.*?)#\//g
  let replaced = modalMessage.replace(regex, '<input type="text">')
  return replaced
}

<div>{this.editModalText()}</div>

Answer 1

Это потому, что является простой строкой.

Вам придется полностью изменить свой подход, если вы хотите смешать синтаксис JSX с вашим шаблоном.

Например, создайте токенизатор , который конвертирует вашу строку в массив вроде:

[
    "Hello, my name is ",
    "/# Ann #/",
    ". I'm working for ",
    "/# IStaff #/",
    ", could you please call me back"
]

Затем зациклите его и вставьте необработанную строку или соответствующий элемент JSX в новый массив и, наконец, верните это.

Answer 2

Вы не ловите / вокруг заполнителей (/ являясь специальным символом регулярного выражения, который необходимо экранировать)

с использованием (.+) или (.*) обеспечит жадный матч.Это значит, что оно будет соответствовать как можно большему, поэтому вы подходите слишком сильно.Вы хотите использовать ленивый матч (противоположность жадному, который останавливается как можно скорее), (.+?) или (.*?)

Вы можете использовать этот:

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back"
let regex = /\/#(.*?)#\//g
let replaced = modalMessage.replace(regex, '<Input />')
console.log(replaced)

Answer 3

Вы можете сопоставить среднюю часть, используя .*?.

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back";
let regex = /\/#(.*?)#\//g;
let replaced = modalMessage.replace(regex, "<input />");
console.log(replaced);

Также вам нужно экранировать / в регулярном выражении с обратной косой чертой (\).
Допустимое выражение начинается и заканчивается /:

/<regex>/<flags>

Итак, в вашем примере:

/          // <- Start of Regular expression
  \/       // <- Match /
  #        // <- Match #
    (.*?)  // <- Match the middle part (non-greedy)
  #        // <- Match #
  \/       // <- Match /
/g         // <- End regex and set "global" flag

---

Пример с HTML:

let modalMessage = "Hello, my name is /# Ann #/. I'm working for /# IStaff #/, could you please call me back";
let regex = /\/#(.*?)#\//g;
let replaced = modalMessage.replace(regex, '<input type="text">');

document.write(replaced);