Реагировать на собственное отображение [объекта Object] после его возврата

Я получаю строку, содержащую html-теги. Пример: «Здравствуйте, нажмите <u>здесь</u>». Я создаю функцию для их интерпретации с целью отрисовки ее в соответствии с нативной реакцией:

formating(text){
        // Define regular expressions to match HTML tags
        const boldRegex = /<b>(.*?)</b>/g;
        const italicRegex = /<i>(.*?)</i>/g;
        const underlineRegex = /<u>(.*?)</u>/g;
        const lineBreakRegex = /<br\s?/?>/g;

        let formattedText = text
          .replace(boldRegex, (_, content) => <Text style = {{ fontWeight: 'bold' }}>{content}</Text>)
          .replace(italicRegex, (_, content) => <Text style = {{ fontStyle: 'italic' }}>{content}</Text>)
          .replace(underlineRegex, (_, content) => <Text style = {{ textDecorationLine: 'underline' }}>{content}</Text>)
          .replace(lineBreakRegex, () => <Text>{'\n'}</Text>);

        return  <Text>{formattedText}</Text>
    }

Проблема в том, что когда я показываю это в своем приложении:

<View>
    {string.formating("my string")}
</View>

Это выдает мне «Привет, нажмите [объект Объект]»

Таким образом, ответ хорошо интерпретируется, и проблема возникает из-за замены, но найти решение невозможно.

Заранее спасибо за вашу помощь.

Хотите отобразить текст примерно такого типа? Привет, нажмите здесь?

— 08.05.2024 12:20

Да, именно, если здесь находится между <b>, как в html, выделите его жирным шрифтом.

— 08.05.2024 12:35

Вероятно, этот ответ может помочь.

— 08.05.2024 13:31

Сопоставление HTML с регулярным выражением — плохая идея. Вам лучше проанализировать его, а затем заменить теги...

— 08.05.2024 14:18

javascript regex react-native replace jsx

08.05.2024 11:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решением было использовать установку реакцииStringReplace с добавлением пряжи, реагирующей-строку-замену.

Вот новый код:

formating(text) {
        const replacements = [
            { regex: /<b>(.*?)</b>/g, component: (match, i) => <Text style = {{ fontWeight: 'bold' }}>{match}</Text> },
            { regex: /<i>(.*?)</i>/g, component: (match, i) => <Text style = {{ fontStyle: 'italic' }}>{match}</Text> },
            { regex: /<u>(.*?)</u>/g, component: (match, i) => <Text style = {{ textDecorationLine: 'underline' }}>{match}</Text> },
            { regex: /<br\s?/?>/g, component: (match, i) => <Text>{'\n'}</Text> }
        ];

        let formattedText = text;
        replacements.forEach(({ regex, component }) => {
            formattedText = reactStringReplace(formattedText, regex, component);
        });

        return <Text>{formattedText}</Text>;
    }

Спасибо @Wiktor Stribiżew за этот трек.

08.05.2024 18:59