Question

背景

所以我正在为我的tumblr写一个情绪化的剧本，所以当我写一篇文章并写上说“:)”时，它会表现出一个笑脸，但事实上，如果我编辑帖子，它仍然是一个“:)”。

我是非常非常非常新的javascript（以及这个论坛），但设法制作一个我实际上理解的脚本！我理解使用jquery方法可以更方便，猜测它是javascript的一个分支，但是我已经研究过它并且很难理解。

问题

该脚本运行良好，直到我想要替换“：”（“或”=。='“因为撇号。我已经搜索了高低，努力尝试使其工作但是唉，不能想出任何事情。如果有人有想法，我们将不胜感激。

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function Smile() {

    var emoticons=new Array();
    emoticons[1]=" :)";
    emoticons[2]=" :D";
    emoticons[3]=" :(";
    emoticons[4]=" :'(";
    emoticons[5]=" XD";
    emoticons[6]=" :3";
    emoticons[7]=" :P";
    emoticons[8]=" ;)";
    emoticons[9]=" :S";
    emoticons[10]=" =.='";
    emoticons[11]=" o.O";
    emoticons[12]=" ^^";
    emoticons[13]=" :O";
    emoticons[14]=" =.=";

    var shortcuts=new Array();
    shortcuts[1]="http://static.tumblr.com/vyvljow/97bluwnkt/_.png";
    shortcuts[2]="http://static.tumblr.com/vyvljow/JNgluhdyn/d.png";
    shortcuts[3]="http://static.tumblr.com/vyvljow/Jaeluhq32/_.png";
    shortcuts[4]="http://static.tumblr.com/vyvljow/0mglujqan/__.png";
    shortcuts[5]="http://static.tumblr.com/vyvljow/JAkluhgto/xd.png";
    shortcuts[6]="http://static.tumblr.com/vyvljow/kEDluhdzu/3.png";
    shortcuts[7]="http://static.tumblr.com/vyvljow/UEnlug0o7/p.png";
    shortcuts[8]="http://static.tumblr.com/vyvljow/gkKlug0ow/wink.png";
    shortcuts[9]="http://static.tumblr.com/vyvljow/24iluhgu5/s.png";
    shortcuts[10]="http://static.tumblr.com/vyvljow/ieIluhp7m/__.png";
    shortcuts[11]="http://static.tumblr.com/vyvljow/oucluuvif/oo.png";
    shortcuts[12]="http://static.tumblr.com/vyvljow/blGluhwqw/__.png";
    shortcuts[13]="http://static.tumblr.com/vyvljow/ci0luwnbw/o.png";
    shortcuts[14]="http://static.tumblr.com/vyvljow/ieIluhp7m/__.png";

    var classes=new Array();
    classes[1]="body hasMarkup";
    classes[2]="caption hasMarkup";
    classes[3]="description hasMarkup";
    classes[4]="description";
    classes[5]="reply hasMarkup";
    classes[6]="caption";

    for (var counter = 1; counter < emoticons.length; counter++) {  
        var find = emoticons[counter];
        var repl = (' <img src="'+shortcuts[counter]+'">');
        for (var classcounter = 1; classcounter < classes.length; classcounter++) { 
            var myEls = getElementsByClass(document,classes[classcounter],'*');
            for ( v = 0; v < myEls.length; v++ ){
                var page = myEls[v].innerHTML;
                while (page.indexOf(find) >= 0) {
                    var i = page.indexOf(find);
                    var j = find.length;
                    page = page.substr(0,i) + repl + page.substr(i+j);
                    myEls[v].innerHTML = page;
                }                
            }
        }
    }
}

现实生活中的代码看起来更整洁。请相信我。不知道如何在这个网站上很好地格式化它。提前感谢您的帮助。

更新了问题!!

事实上，这不是代码出错，而是因为撇号不匹配。这是tumblr吐出的撇号，我不能改变：'
这是代码中的撇号：'

如果我尝试在我的js代码中使用tumblr撇号，它会破坏一切。一切都破裂了。更何况它不起作用。

因此，有一个全能的APOSTROPHE可以解决所有问题吗？或者全部替换。那种东西。并且最好不要破坏我的代码。再次感谢。：）

感谢所有的回复。你们很聪明：）

更新2

我确定tumblr撇号的ascii代码为＃8217，而我的javascript代码使用＃39 但我不知道如何使用它来修改和兼容我的脚本。

问题已经解决!!

非常感谢所有回复和回复的人。 :) 特别是Adam Jurczyk。

Answer 1

当我尝试替换包含撇号的表情符号时，它可以正常工作。

演示：http://jsfiddle.net/Guffa/EQKzq/1/

关于代码的一些注释：

数组基于零，但您可以在索引1开始使用它们。
您可以使用文字数组语法初始化数组，而不是一次在数组中放置一个项目。
您可以使用push方法将项添加到数组中（在getElementsByClass函数中）。
您在每次替换后将内容放回元素中，但您应该在循环后执行此操作。
您应该交换循环，以便在元素循环中使用表情符号循环，这样就可以大大减少使用innerHTML的次数。

更新的代码：

function getElementsByClass(node, searchClass, tag) {
  var classElements = [];
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("\\b" + searchClass + "\\b");
  for (i = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      classElements.push(els[i]);
    }
  }
  return classElements;
}

function Smile() {
  var emoticons = [
    " :)",
    " :D",
    " :(",
    " :'(",
    " XD",
    " :3",
    " :P",
    " ;)",
    " :S",
    " =.='",
    " o.O",
    " ^^",
    " :O",
    " =.="
  ];
  var shortcuts = [
    "http://static.tumblr.com/vyvljow/97bluwnkt/_.png",
    "http://static.tumblr.com/vyvljow/JNgluhdyn/d.png",
    "http://static.tumblr.com/vyvljow/Jaeluhq32/_.png",
    "http://static.tumblr.com/vyvljow/0mglujqan/__.png",
    "http://static.tumblr.com/vyvljow/JAkluhgto/xd.png",
    "http://static.tumblr.com/vyvljow/kEDluhdzu/3.png",
    "http://static.tumblr.com/vyvljow/UEnlug0o7/p.png",
    "http://static.tumblr.com/vyvljow/gkKlug0ow/wink.png",
    "http://static.tumblr.com/vyvljow/24iluhgu5/s.png",
    "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png",
    "http://static.tumblr.com/vyvljow/oucluuvif/oo.png",
    "http://static.tumblr.com/vyvljow/blGluhwqw/__.png",
    "http://static.tumblr.com/vyvljow/ci0luwnbw/o.png",
    "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png"
  ];
  var classes = [
    "body hasMarkup",
    "caption hasMarkup",
    "description hasMarkup",
    "description",
    "reply hasMarkup",
    "caption"
  ];
  for (var classcounter = 0; classcounter < classes.length; classcounter++) {
    var myEls = getElementsByClass(document, classes[classcounter], '*');
    for (v = 0; v < myEls.length; v++) {
      var page = myEls[v].innerHTML;
      var replaced = false;
      for (var counter = 0; counter < emoticons.length; counter++) {
        var find = emoticons[counter];
        var j = find.length;
        var repl = ' <img src="' + shortcuts[counter] + '">';
        do {
          var i = page.indexOf(find);
          if (i != -1) {
            replaced = true;
            page = page.substr(0, i) + repl + page.substr(i + j);
          }
        } while (i != -1);
      }
      if (replaced) {
          myEls[v].innerHTML = page;
      }
    }
  }
}

Answer 2

也许更简单：

var emots = {
    " :)" : "http://static.tumblr.com/vyvljow/97bluwnkt/_.png",
    " :D" : "https://static.tumblr.com/vyvljow/JNgluhdyn/d.png",
    " :(" : "http://static.tumblr.com/vyvljow/Jaeluhq32/_.png",
    " :'(" : "http://static.tumblr.com/vyvljow/0mglujqan/__.png",
    " XD" : "http://static.tumblr.com/vyvljow/JAkluhgto/xd.png",
    " :3" : "http://static.tumblr.com/vyvljow/kEDluhdzu/3.png",
    " :P" : "http://static.tumblr.com/vyvljow/UEnlug0o7/p.png",
    " ;)" : "http://static.tumblr.com/vyvljow/gkKlug0ow/wink.png",
    " :S" : "http://static.tumblr.com/vyvljow/24iluhgu5/s.png",
    " =.='" : "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png",
    " o.O" : "http://static.tumblr.com/vyvljow/oucluuvif/oo.png",
    " ^^" : "http://static.tumblr.com/vyvljow/blGluhwqw/__.png",
    " :O" : "http://static.tumblr.com/vyvljow/ci0luwnbw/o.png",
    " =.=" : "http://static.tumblr.com/vyvljow/ieIluhp7m/__.png"
};

function smile(str){
    var out = str;
    for(k in emots){
        out = out.replace(k,'<img src="'+emots[k]+'"/>','g');
    }
    return out;
}

在jsfiddle上试用 - 工作正常。有时候只需要regexp magic

修改

至于这个撇号问题 - 试着找出这个tumblr撇号有什么代码点（检查'参见'部分标准'{3}}和emots for replace，改为使用它 - 就像这里：{{1 }}

来自vince的回复

不确定代码点是什么，但我确定tumblr撇号的ascii代码为＃8217，而我的javascript代码使用了＃39
我不知道如何使用它来修改和兼容我的脚本。

AJ： here的JS字面值为" :\u0027("，请按以下方式使用：

\u2019

在javascript中查找并替换包含'（撇号）的字符串

背景

问题

更新了问题!!

更新2

问题已经解决!!

2 个答案: