在整个文档维护案例中将一个特定单词更改为另一个单词答案

【问题标题】：Changing one specific word to another word throughout the whole document maintaining case在整个文档维护案例中将一个特定单词更改为另一个单词
【发布时间】：2018-05-28 12:37:07
【问题描述】：

我是 JavaScript 新手，我只是不明白这一点......

我正在尝试将整个网页中的特定单词“katt”更改为“smurf”。每个“katt”都在一个“span”标签内，我可以使用以下代码更改它：

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

问题是每个“smurf”现在都只有小写字母，即使它位于句子的开头。我知道我需要一个 if/else 来解决我的问题，但我不知道如何编码。

任何帮助将不胜感激。

【问题讨论】：

javascript if..else

标签： javascript for-loop if-statement

【解决方案1】：

您可以使用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 />

或者更短，因为逻辑很简单，你可以使用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'

}

【讨论】：

【解决方案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/>

【讨论】：

【解决方案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";
  }
}

【讨论】：

【解决方案4】：

首先，让我从这里借一些代码：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>

【讨论】：