Заменить текст диапазоном

Question

Я использую React и пытаюсь выделить значение, введенное пользователем, в строке, содержащей это значение.

Чтобы выделить это значение, я пытаюсь заменить подстроку, соответствующую this.props.value с подстрокой, содержащей это значение + html.

Например, для item.name: John Если пользователь вводит «Jo». Я хочу отобразить Jo hn Подстрока «Jo» выделена.

Это мой код:

{this.props.value.length > 0 &&
    item.name.search(this.props.value)
    ? item.name.replace(this.props.value, `<span className="myClass">${this.props.value}</span>`)
    : item.name
}

Возвращаемое значение представляет собой обычный текст, диапазон равен не принимается за html. Как я могу интерпретировать эти html теги?

Answer 1

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

const handleMatch = () => {
    return (
      <span>
        <span style={{ color: "red" }}>{props.value}</span>
        <span>{item.name.replace(props.value, "")}</span>
      </span>
    );
  };

  return (
    <div>
      {props.value.length > 0 && item.name.search(props.value) === 0
        ? handleMatch()
        : item.name}
    </div>
  );
};

Вот рабочая демо

Answer 2

Для наиболее надежного решения в вашем случае, this может выполнять работу, но вы должны хорошо понимать, что это такое! Это не содержит опасно в своем имени без причины:

В общем, установка HTML из кода рискованна, потому что легко случайно подвергнуть ваших пользователей к межсайтовый скриптинг (XSS) атака.

Если вы go с этим решением, вы должны быть на 100% уверены, что значение, полученное от ввода пользователя, подтверждено и подтверждена как безопасная (по крайней мере, html -экранированная ).

И если вы хотите более безопасное решение (РЕКОМЕНДУЕТСЯ) , вам нужно написать немного больше кода, проверьте это codeandbox (извините, если я пропустил некоторую проверку индекса, но вы поймете суть). Как видите, он выполняет итерацию по строке, проверяя индекс, с которого начинается совпадение, берет кусок текста перед совпадением (без его стилизации) и после этого помещает стилизованную фразу. Оттуда он продолжается до конца, чтобы найти все оставшиеся совпадения. Это может стать более сложным, если, например, ваша строка может содержать html, и в этом случае вы будете еще больше токенизировать строку.

Answer 3

Здесь я не сосредотачиваюсь на вашем коде.

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

 <div>
        {item.name && <span className="myClass">${this.props.value}</span>}
        {!item.name && this.props.value}
 </div>