Замена одного конкретного слова на другое слово во всем документе, сохраняя регистр

Question

Я новичок в JavaScript и просто не могу понять одну вещь ...

Я пытаюсь изменить определенное слово "katt" на "smurf" на всей веб-странице.Каждый «katt» находится внутри тега «span», и я могу изменить его, используя этот код:

for(var i=0;i<100;i++) {
    changeCat = document.getElementsByTagName("span")[i].innerHTML = "smurf";
}  

Проблема в том, что каждый «smurf» теперь только строчными буквами, даже если онв начале предложения.Я знаю, что мне нужен if / else для решения моей проблемы, но я не знаю, как его кодировать.

Любая помощь будет принята с благодарностью.

Answer 1

Во-первых, позвольте мне взять здесь некоторый код: https://stackoverflow.com/a/1144788/125981

Какой случай вы хотите сопоставить с чем?два примера:

function escapeRegExp(str) {
  return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

function changeem(oldtext, newtext) {
  var allspans = document.getElementsByTagName("span");
  for (let i = 0; i < allspans.length; i++) {
    allspans[i].innerHTML = replaceAll(allspans[i].innerHTML, oldtext, newtext);
  }
}
// the case you need to match and change to:
changeem("smurf", "cat");
// upper only?
changeem("Smurf", "Dog");

span {
  border: solid lime 1px;
}

<span>I smurf this smurf</span>
<span>Smurfs are the tood dudes</span>
<span>Not all smurfs are dudes</span>
<span>WHat is a Surf Smerf anyway?</span>
<span>I smurf this Smurf</span>
<span>Smurfs are the tood dudes</span>
<span>Not all smurfs are dudes</span>
<span>WHat is a Surf Smerf anyway?</span>

Answer 2

Как это?

var span = document.getElementsByTagName("span");

for (var i = 0; i < span.length; i++) {
  //span[i].innerHTML = "smurf"; 
  //	OR
  span[i].innerHTML = span[i].innerHTML.replace(/katt/gi, 'smurf');
}

<span>hey katt hello</span><br/>
<span>hey katt hello</span><br/>
<i>hey katt hello</i><br/>
<span>hey katt hello</span><br/>
<span>hey katt hello</span><br/>
<b>hey katt hello</b><br/>
<span>hey katt hello</span><br/>
<span>katt hey katt hello</span><br/>

Answer 3

Просто проверьте, заглавная ли первая буква:

function changeWords() {
  var spans = document.getElementsByTagName('span');

  for (var i = 0; i < spans.length; i++) {
    if (spans[i].innerText[0] == spans[i].innerText[0].toUpperCase()) {
      spans[i].innerText = "Smurf";
    } else {
      spans[i].innerText = "smurf";
    }
  }
}

<span>Katt</span>
<br> Some stuff <span>katt</span>
<br>
<span>Katt</span> other stuff
<br>
<button onclick="changeWords()">Let the magic happen!</button>

Вы также должны использовать element.length вместо номера с жестким кодом.Если число слишком велико или слишком мало, ваш скрипт будет глючить.

Если вы просто хотите изменить текст, вы должны использовать innerText.

---

Без функции икнопка (которая только для отображения результата), код выглядит так:

for (var i = 0; i < spans.length; i++) {
  if (spans[i].innerText[0] == spans[i].innerText[0].toUpperCase()) {
    spans[i].innerText = "Smurf";
  } else {
    spans[i].innerText = "smurf";
  }
}

Answer 4

Вы можете проверить, имеет ли первая буква слова заглавные слова if...else:

let items = document.querySelectorAll('span')

for(let i = 0; i < items.length; i++) {

  if(items[i].innerHTML == 'Hello') {
    items[i].innerHTML = 'Bye'
  } else if(items[i].innerHTML == 'hello') {
  items[i].innerHTML = 'bye'
  }
  
}

<span>Hello</span><br />
<span>Nope</span><br />
<span>Hel-lo</span><br />
<span>Yes</span><br />

Или даже короче, поскольку логика проста, вы можете использовать троичный оператор :

let items = document.querySelectorAll('span')

for(let i = 0; i < items.length; i++) {

  items[i].innerHTML = (items[i].innerHTML == 'Hello') ? 'Bye' else 'bye'

}