Если в тексте есть слово, то как добавить ему span?

Question

[Гарес Антонович]

Есть фраза, которая должна быть написана всегда одинаково.
ДопустимToster.ru (торговая марка), но если на сайте есть text-transform: uppercace; то написано TOSTER.RU.
Я бы хотел сделать что бы фразе toster.ru давало

<span style="text-transform: lowercase;">toster.ru</span>

Как как я могу это сделать правильно?

Answer 1

[Stalker_RED]

text.replace(/(toster\.ru)/ig, "<span class=\"tm\">$1</span>")

https://jsfiddle.net/4hexkpmn/

Answer 2

[gleendo]

<span class="some-class">google.com</span>

span.some-class {
  text-transform: lowercase;
}

// or
const elem = document.querySelectorAll(`.some-class`);

Array.prototype.forEach.call(elem, item => item.style.textTransform: "lowercase");

Answer 3

[Saboteur]

1. Надежно - img

2. Или в css не должно быть глобальных описаний, без указания классов, что в принципе отслеживать неудобнее, тогда можно просто уникальное имя класса.

3. не поддерживается в некоторых браузерах, типа сафари, старые IE
.clean-class {
all: unset;
}

4. Или создаете css класс, где все теги прописываете как unset
.reset-style {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
border : 0;
border-style : none;
border-width : medium;
... и так все, что в общем немного оверинженеринг.