Changing one specific word to another word throughout the whole document maintaining case

Question

I'm new to JavaScript and I just can't figure out this one thing...

I'm trying to change the specific word "katt" to "smurf" throughout the whole webpage. Every single "katt" is within a "span" tag and I can change it using this code:

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

The problem is though that every single "smurf" is now only in lowercase letters, even if it's at the beginning of a sentence. I do know I need an if/else to solve my problem but I have no idea how to code it.

Any help would be greatly appreciated.

[javascript if..else](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else) — Ryad Boubaker, May 28 '18 at 12:47

score 0 · Answer 1 · answered May 28 '18 at 12:49

You can check if the word has its first letter capitalized with an if...else statement:

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 />

Or even shorter since the logic is simple, you can use a ternary operator:

let items = document.querySelectorAll('span')

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

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

}

score 0 · Answer 2 · answered May 28 '18 at 12:49

Like this ?

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/>

CodeF0x · Answer 3 · 2018-05-28T12:56:51.470

Simply check if the first letter is capitalized:

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>

You also should use element.length instead of a hardcoded number. If the number is too high or too low, your script will get buggy.

If you just want to modify text, you should use innerText.

Without the function and the button (which is only to show the result), the code looks like this:

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";
  }
}

score 0 · Answer 4 · answered May 28 '18 at 15:16

First, let me borrow some code from here: https://stackoverflow.com/a/1144788/125981

Which case do you wish to match to what? two examples:

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>

Changing one specific word to another word throughout the whole document maintaining case

4 Answers4