React преобразует строку в элемент с суб- и суперскриптами

Я пытаюсь создать функциональный компонент, который в основном преобразует символы ^ и _ в строку в суб- и суперскрипты. Вот несколько примеров.

'example_3' -> <h1>example<sub>3<sub/><h1/>

должен начинать тег с «_» или «^» и закрывать тег на следующем нечисловом символе.

'another_1234Example' -> <h1>another<sub>1234<sub/>Example<h1/>

также должен уметь работать с любым количеством чисел

'something^2else_34' -> <h1>something<sup>2<sub/>else<sub>34<sub/> <h1/>

Когда ты хочешь покончить с этим? Вы можете заменить _ или ^ на <sub>

Niels Reijnders 06.04.2022 20:45

На следующем нечисловом символе я поясню в вопросах.

Thomas Franklin 06.04.2022 20:48
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
0
2
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Решение 1 (слишком сложное):

const string = "another_1234Example_348jiwf_342";

console.log(
  (string.trim() + " ")
    .split("_")
    .join("<sub>")
    .split(/(?<=<sub>\d+)(?!\d)/g)
    .join("</sub>")
);

Разделить _ это вернет массив, после этого присоединитесь к <sub>. Затем проверьте с помощью регулярного выражения, соответствует ли оно числу с началом <sub>.

Ссылка на регулярное выражение: https://regex101.com/r/RFkEQa/1

Решение 2 (рекомендуется):

Лучше использовать замену для такого рода вещей. Ссылаясь на это сообщение: https://stackoverflow.com/a/50463993/8273193

const string = "another_1234Example_348jiwf_342";
console.log(string.replace(/(_\d+)/g, "<sub>$&</sub>").replace(/_/g, ""));

Это отлично работает в большинстве случаев: однако он не добавляет закрывающий тег, если строка заканчивается числом, и не добавляет его, если в строке есть несколько индексов.

Thomas Franklin 07.04.2022 02:34

О, не проверял, это обновит мой ответ

Niels Reijnders 07.04.2022 09:46

а как же супер скрипты? то же самое или нужно другое регулярное выражение?

Thomas Franklin 07.04.2022 14:04

Другое регулярное выражение stackoverflow.com/questions/35976910/…. Вы можете комбинировать их с номером один.

Niels Reijnders 07.04.2022 17:16

Спасибо! как насчет отрицательных чисел (просто из любопытства).

Thomas Franklin 07.04.2022 20:30

Другие вопросы по теме