ReactJS тэг rasa nlu entity подсветка текста - PullRequest
Новая
       7

ReactJS тэг rasa nlu entity подсветка текста

0 голосов
/ 27 мая 2019

Я разрабатываю простое приложение реагирования для отображения результатов поиска rasa HTTP api и хочу пометить сущности в предложении. Мой код хорошо работает для 1 слова, но разрывается на 2 слова (выделяется только первое слово)

Это то, что я делаю 

  const [colors, setColors] = useState([
    "salmon",
    "primary",
    "purple",
    "orange"
  ]);

  const tagSentence = () => {
    let sentence = props.data.text;
    const entities = props.data.entities;

    entities.map((e, eIndex) => {
      sentence = sentence.replace(e.value, `<${eIndex}>${e.value}`);
    });
    return sentence.split(" ");
  };


          <Typography variant="h5" component="h2">
            {props.data.entities.map(t => {
              if (t.value.includes("<")) {
                return (
                  <Chip
                    key={t.value}
                    label={t.slice(3, t.length)}
                    color="primary"
                    style={{ backgroundColor: colors[t.slice(1, 2)] }}
                  />
                );
              } else {
                return ` ${t} `;
              }
            })}
          </Typography>

Объект Entities имеет индекс начала и конца слов, но я не могу понять, как его использовать.

Пример предложения:

Питер - мой лучший друг 

{
"text" : "peter is my best friend"
"entities" : [{"entity": "PERSON", "value": "peter", "start": 1, "end": 5...}]
}

РЕДАКТИРОВАТЬ:

Закончилось этим, теперь посмотрим, как включить в JS целое слово 

          <Typography variant="h5" component="h2">
            {props.data.text.split(" ").map((s, sIndex) => {
              return props.data.entities.map((e, eIndex) => {
                if (e.value.includes(s)) {
                  return (
                    <Chip
                      key={s}
                      label={s}
                      style={{ backgroundColor: colors[sIndex] }}
                      color="primary"
                    />
                  );
                } else {
                  return ` ${s} `;
                }
              });
            })}
          </Typography>

1 Ответ

0 голосов
/ 28 мая 2019

Я, наконец, использовал https://github.com/iansinnott/react-string-replace, чтобы легко заменить строки компонентами, работал как шарм. 

  const tagSentence = () => {
    let sentence = props.data.text;
    props.data.entities.forEach((e, eIndex) => {
      sentence = reactStringReplace(sentence, e.value, (match, i) => (
        <Chip
          key={i}
          label={match}
          style={{ backgroundColor: colors[eIndex] }}
          color="primary"
        />
      ));
    });
    return sentence;
  };
...