Кубический метр форматировать в тег <sup>3</sup>

Рейтинг: 2Ответов: 2Опубликовано: 16.04.2023

Как с помощью js можно выделить уже на фронте готовый html код

дано

<div class="price">от 400 ₽ м3</div>

хочется все эти единицы измерения, где есть кубический метр выделить в тег так

<div class="price">от 400 ₽ м<sup>3</sup></div>
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

По мотивам комментария участника Stanislav Volodarskiy:

Запросите все дивы с классом "price", сделайте замену м3 -> м3 в innerHtml.

document.querySelectorAll('.price').forEach(el => el.innerHTML = el.textContent.replace(/м(2|3)/i, 'м<sup>$1</sup>'));
<div class="price">от 400 ₽ м3</div>
<div class="price">от 400 ₽ М3</div>
<div class="price">от 400 ₽ м<sup>3</sup></div>
<div class="price">от 400 ₽ м<sup>2</sup></div>

Вариант с сохранением существующей разметки и регистра букв:

document.querySelectorAll('.price').forEach(el => el.innerHTML = el.innerHTML.replace(/(м)(2|3)/i, '$1<sup>$2</sup>'));
<div class="price">от 400 ₽ м3</div>
<div class="price">от 400 ₽ М3</div>
<div class="price">от 400 ₽ м<sup>3</sup></div>
<div class="price">от 400 <b>₽</b> м<sup>3</sup></div>
<div class="price">от <i>400 ₽ M<sup>2</sup></i></div>

▲ 3

Запросите все дивы с классом "price", сделайте замену м3 -> м<sup>3</sup> в innerHTML:

document.querySelectorAll('div.price').forEach(
    el => el.innerHTML = el.innerHTML.replace(
        /(м)3/gi, '$1<sup>3</sup>'
    )
);
<div class="price">от 400 ₽ м3</div>
<div class="price">от 400 ₽ М3</div>
<div class="price">от <i>400 ₽ м3</i></div>
<div class="price">от <i>400 ₽ М3</i></div>
<div class="price">от <i>400 ₽ м3</i> до <i>500 ₽ м3</i></div>