Question

下面的代码应该替换每个实例，好吧，它很复杂，但基本上它会在页面上取一个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。这是我用Javascript编写的第一件事，我是C，C ++，Objective C，VBA（上帝禁止）程序员，所以如果有更简单的方法，请不要害怕指出它出来了。

Answer 1

您已编译了与“27015”匹配的所有字符串的列表，现在您需要遍历每个字符串并与列表进行比较。

尝试“foreach”循环（在Javascript中有点困难）或尝试“while”循环。当你比较（并可能改变）它时，你会从列表中弹出每个元素，然后在列表中没有剩下的时候退出循环。

我会使用jQuery来帮助你，因为它有一个方便的.each()函数，以及使DOM的编辑更容易。

Answer 2

您可以使用正则表达式进行替换，以便为全局替换指定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;
}

Answer 3

您可以执行以下操作：

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;

Answer 4

我会将数据与代码分开，并处理数据结构中的数据。

这个新版本具有以下优点：

它只将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;
    }
}

如果这是我的代码，我会尝试将替换范围缩小到仅有针对性的div，这样我就不会在整个文档中引起重排，也可能更快。

Javascript中的HTML元素替换

4 个答案: