Javascript中的HTML元素替换

下面讨论的代码应该替换的每个实例都很复杂，但基本上它将在页面上获取一个IP，并将其转换为服务器名称（由我在代码中定义）。它的工作原理是它替换了一些IP，但每个IP只有一个，所以如果一个页面上有多个实例，它只替换一个。我该怎么办

var arrServerInstances = document.body.innerHTML.match('27015');

    if (arrServerInstances != null)
    {
        if (arrServerInstances.length > 0)
        {   
            //UK Servers
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.178:27015','Common Grounds D2 UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.174:27015','Assault 24/7 UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.176:27015','Officefest UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.175:27015','Dustfest UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.177:27015','London Gungame UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.246.179:27015','Dust 2 Deatchmatch UK');
            document.body.innerHTML = document.body.innerHTML.replace('83.222.240.93:27015','Mad Hatter\'s TF2 Tea Party UK');
            //US Servers
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.164:27015','Dust/Office Deathmatch US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.169:27015','Zombiemod US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.165:27015','Dust 24/7 -aMs- US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.172:27015','CS 1.6 Gungame US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.239.31:27015','Crackhouse US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.166:27015','Iceworld 24/7 US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.170:27015','Mad as a TF2 Hatter US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.167:27015','Gungame Turbo US');
            document.body.innerHTML = document.body.innerHTML.replace('76.74.236.168:27015','CS:S Iceworld 24/7 US');
        }
    }

---

<> P.S.S.这是我在JavaScript中写的第一件事，我是C、C++、Objic C、VBA（上帝禁止）程序员，所以如果有一个更简单的方法来做这件事，请不要害怕指出它。

< p>你已经编译了一个与“27015”匹配的字符串的列表，现在你需要循环一遍，并与你的列表进行比较。 尝试“foreach”循环（在Javascript中有点困难）。
或者尝试“while”循环。您可以在比较（并可能更改）列表时将每个元素从列表中弹出，然后在列表中没有剩余元素时退出循环

---

在这里，我将使用jQuery来帮助您，因为它有一个方便的功能，并且使DOM的编辑更加容易。

您使用正则表达式进行替换，以便可以为全局替换指定

g

标志：

s = s.replace(/83\.222\.246\.178:27015/g,'Common Grounds D2 UK');

您不应该获取正文的HTML代码，然后在每次替换时将其放回原处。这意味着对于每次替换，您都要为主体中的每个对象创建一个字符串表示，然后再次将其解析回元素中

您可以使用

indexOf

方法在另一个字符串中查找第一个出现的字符串，而不是使用正则表达式将每个出现的字符串都放入数组中

// get HTML
var html = document.body.innerHTML;

var hasServerInstances = html.indexOf('27015') != -1;

if (hasServerInstances) {   
  //UK Servers
  html = html
    .replace(/83\.222\.246\.178:27015/g,'Common Grounds D2 UK')
    .replace(/83\.222\.246\.174:27015/g,'Assault 24/7 UK')
    .replace(/83\.222\.246\.176:27015/g,'Officefest UK')
    .replace(/83\.222\.246\.175:27015/g,'Dustfest UK')
    .replace(/83\.222\.246\.177:27015/g,'London Gungame UK')
    .replace(/83\.222\.246\.179:27015/g,'Dust 2 Deatchmatch UK')
    .replace(/83\.222\.240\.93:27015/g,'Mad Hatter\'s TF2 Tea Party UK');
  //US Servers
  html = html
    .replace(/76\.74\.236\.164:27015/g,'Dust/Office Deathmatch US')
    .replace(/76\.74\.236\.169:27015/g,'Zombiemod US')
    .replace(/76\.74\.236\.165:27015/g,'Dust 24/7 -aMs- US')
    .replace(/76\.74\.236\.172:27015/g,'CS 1.6 Gungame US')
    .replace(/76\.74\.239\.31:27015/g,'Crackhouse US')
    .replace(/76\.74\.236\.166:27015/g,'Iceworld 24/7 US')
    .replace(/76\.74\.236\.170:27015/g,'Mad as a TF2 Hatter US')
    .replace(/76\.74\.236\.167:27015/g,'Gungame Turbo US')
    .replace(/76\.74\.236\.168:27015/g,'CS:S Iceworld 24/7 US');
  // put the HTML back
  document.body.innerHTML = html;
}

您甚至可以使用正则表达式在一次替换中匹配多个服务器：

// get HTML
var html = document.body.innerHTML;

var hasServerInstances = html.indexOf('27015') != -1;

if (hasServerInstances) {   
  //UK Servers
  html = html.replace(/83\.222\.246\.17[4-9]:27015/g, function(m){
    switch(m) {
      case '174': return 'Assault 24/7 UK';
      case '175': return 'Dustfest UK';
      case '176': return 'Officefest UK';
      case '177': return 'London Gungame UK';
      case '178': return 'Common Grounds D2 UK';
      case '179': return 'Dust 2 Deatchmatch UK';
    }
  });
  html = html.replace(/83\.222\.240\.93:27015/g,'Mad Hatter\'s TF2 Tea Party UK');
  //US Servers
  html = html.replace(/76\.74\.236\.1(6[4-9]|7[02]):27015/g, function(m){
    switch(m) {
      case '164': return 'Dust/Office Deathmatch US';
      case '165': return 'Dust 24/7 -aMs- US';
      case '166': return 'Iceworld 24/7 US';
      case '167': return 'Gungame Turbo US';
      case '168': return 'CS:S Iceworld 24/7 US';
      case '169': return 'Zombiemod US';
      case '170': return 'Mad as a TF2 Hatter US';
      case '172': return 'CS 1.6 Gungame US';
    }
  });
  html = html.replace(/76\.74\.239\.31:27015/g,'Crackhouse US');
  // put the HTML back
  document.body.innerHTML = html;
}

---

您可以执行以下操作：

var ips = {
  '83.222.246.178:27015':'Common Grounds D2 UK',
  '83.222.246.178:27015':'Common Grounds D2 UK',
  '83.222.246.178:27015':'Common Grounds D2 UK'
  // The rest of the ip adress go here
};

var text = document.body.innerHTML;
for(var i in ips)text=text.replace(RegExp(i,'g'),ips[i]);
document.body.innerHTML = text;

---

我会将数据从代码中分离出来，并从数据结构中处理数据

此新版本具有以下优点：

它只将innerHTML设置回一次，这意味着只有一个DOM重新分析和回流，而不是很多

数据被放入一个表中并循环，而不是大量复制的代码行

由于添加了“g”标志，该代码将替换给定IP的所有事件

这段代码正确地转义正则表达式中的句点，以便它们只匹配句点，而不是通常的正则表达式通配符

我把它做成了一个函数，这样你的变量就不是全局变量了

我已经将if比较压缩为一个复合比较

从每个字符串中删除重复的“：27015”，并将其放入代码中一次

代码如下：

function attachIpNames() {
    var str = document.body.innerHTML;
    var arrServerInstances = str.match('27015');
    if (arrServerInstances && arrServerInstances.length > 0) {
        var definitions = [
             //UK Servers
            '83.222.246.178', 'Common Grounds D2 UK',
            '83.222.246.174', 'Assault 24/7 UK',
            '83.222.246.176', 'Officefest UK',
            '83.222.246.175', 'Dustfest UK',
            '83.222.246.177', 'London Gungame UK',
            '83.222.246.179', 'Dust 2 Deatchmatch UK',
            '83.222.240.93',  'Mad Hatter\'s TF2 Tea Party UK',
            //US Servers
            '76.74.236.164', 'Dust/Office Deathmatch US',
            '76.74.236.169', 'Zombiemod US',
            '76.74.236.165', 'Dust 24/7 -aMs- US',
            '76.74.236.172', 'CS 1.6 Gungame US',
            '76.74.239.31',  'Crackhouse US',
            '76.74.236.166', 'Iceworld 24/7 US',
            '76.74.236.170', 'Mad as a TF2 Hatter US',
            '76.74.236.167', 'Gungame Turbo US',
            '76.74.236.168', 'CS:S Iceworld 24/7 US'
        ];

        var target;
        for (var i = 0; i < definitions.length; i+= 2) {
            target = definitions[i].replace(".", "\\.") + ":27015";         // get target and escape the period so it will match an actual period in the regex
            str = str.replace(new RegExp(target, "g"), definitions[i+1]);
        }
        document.body.innerHTML = str;
    }
}

函数attachIpNames（）{
var str=document.body.innerHTML；
var arrServerInstances=str.match（'27015'）；
if（arrServerInstances&&arrServerInstances.length>0）{
变量定义=[
//英国服务器
“83.222.246.178”、“公共场所D2英国”，
‘83.222.246.174’、‘全天候突击英国’，
‘83.222.246.176’、‘Officefest UK’，
‘83.222.246.175’、‘英国垃圾节’，
“83.222.246.177”，“英国伦敦枪战”，
‘83.222.246.179’、‘Dust 2 Deatchmatch UK’，
“83.222.240.93”，“疯帽匠的TF2茶党英国”，
//美国服务器
‘76.74.236.164’、‘灰尘/办公室死亡竞赛美国’，
‘76.74.236.169’、‘僵尸美国’，
‘76.74.236.165’、‘灰尘24/7-aMs-US’，
‘76.74.236.172’、‘CS 1.6枪战美国’，
‘76.74.239.31’、‘Crackhouse US’，
‘76.74.236.166’、‘冰上世界24/7美国’，
‘76.74.236.170’、‘疯狂如TF2帽匠美国’，
‘76.74.236.167’、‘Gunggame Turbo US’，
‘76.74.236.168’、‘CS:S冰上世界24/7美国’
];
var目标；
对于（变量i=0；i

---

如果这是我的代码，我会尝试将替换范围缩小到只针对div，这样我就不会在整个文档中造成回流，而且速度可能也会更快。

FYI：通常尝试避免

document.body.innerHTML=document.body.innerHTML.someModification…

。每次这样做时，浏览器都需要完全重新创建DOM。在您的例子中，DOM被重新创建了16次。有一些破坏性较小的解决方案。