Могу ли я заменить HTML текст в элементе, используя vanilla JS? e.target.inner HTML .replace («старый текст», «новый текст»);

Question

const tour = document.querySelector('.tour__heading');
const addSection = e => {
        e.target.innerHTML.replace('SHOW','red');
};
tour.addEventListener('click', addSection);

Могу ли я использовать e.target для изменения HTML текста, как указано выше?

Answer 1

Функция String.prototype.replace заменит содержимое строки, но не изменит оригинал.

Вы можете сделать:

e.target.innerHTML = e.target.innerHTML.replace('SHOW','red')

Или вы можете создать полифилл для пользовательского функция на объекте HTMLElement.

/* A polyfill for a custom HTML text replacer function */
if (HTMLElement.prototype.replaceHTML === undefined) {
  HTMLElement.prototype.replaceHTML = function(regexpOrSubstr, newSubstrOrFunc) {
    this.innerHTML = this.innerHTML.replace.apply(this.innerHTML, arguments)
  }
}

const tour = document.querySelector('.tour__heading')
const addSection = e => {
  //e.target.innerHTML = e.target.innerHTML.replace('SHOW','red')
  e.target.replaceHTML('SHOW','red')
}
tour.addEventListener('click', addSection)

.tour__heading:hover {
  cursor: pointer;
}

<div class="tour__heading">SHOW</div>

Answer 2

Как упомянул Ник Парсон , String.replace() - чистая функция. Возвращает новое значение, но не изменяет существующее.

const initialText = 'initial';
const changedText = initialText.replace('initial', 'changed');

console.log(changedText);
console.log(initialText);

---

Я бы рекомендовал использовать textContent вместо этого. Поскольку вы хотите работать только с текстом внутри элемента. Это безопаснее.

---

const tour = document.querySelector('.tour__heading');
const addSection = e => {
        const text = e.target.textContent;
        const updatedText = text.replace('SHOW','red');
        e.target.textContent = updatedText;
};
tour.addEventListener('click', addSection);

<h1 class="tour__heading">
  SHOW
</h1>