title: Javascript split method: special characters
body: <p>I made a little chat into my site.
  I want the user to be able to do this:
  When he types some special characters such as <code>:P</code>, an icon will be shown
  I do this with this code:</p>
  
  <pre><code>chat_icons=new Array();
  
  $(".chat_icons img").each(function(index){
      chat_icons[index]=$(this).attr("title");
  });
  
  $.each(chat_icons, function(index, value) { 
      var msg_array=new Array();
      msg_array=message.split(value);
      message="";
  
      for(j=0;j&lt;msg_array.length;j++){
          message+=msg_array[j];
          url=index+1;
          img_msg="&lt;img src=\"/apps/chat/icons/"+url+".png\" title=\""+value+"\" /&gt;";
          message+=img_msg;
      };
  
      message=message.substr(0,message.length-img_msg.length);
  });
  </code></pre>
  
  <p>This code works pretty well.
  The second thing I want to do is when a chat user types a YouTube url a link will be shown.
  I try to do this with this:</p>
  
  <pre><code>msg_array=new Array();
  msg_array=message.split("http://www.youtube.com/watch");
  message="";
  
  for(j=0;j&lt;msg_array.length;j++){
      if(j / 2==0){
          message+=msg_array[j];
      }
      else {
          youtube_array=new Array();
          youtube_array=msg_array[j].split(" ");
          message+="&lt;a href=\"http://www.youtube.com/watch"+youtube_array[0]+"\" target=\"_blank\"&gt;http://www.youtube.com/watch"+youtube_array[0]+"&lt;/a&gt; ";
          for(k=1;k&lt;youtube_array.length;k++){
              message+=youtube_array[k]+" ";
          }
      }
  }
  </code></pre>
  
  <p>This code gives me the following results:</p>
  
  <pre><code>http:/ /www. youtube.com/ watch?v=some_id --&gt;works
  http:/ /www. youtube.com /watch?v=some_id chat text chat text     
  http://www.youtube.com/watch?v=some_id ---&gt; works
  http:/ /www. youtube.com/ watch?v=some_id&amp;feature=something --&gt;don't work
  http:/ /www. youtube.com/ watch?v=some_id&amp;feature=something anything else --&gt; doesn't work
  </code></pre>
  
  <p>The last 2 examples gives me this code <code>&lt;a href="http:/ /www. youtube.com/watch?v=some_id"&gt;http:/ /www.youtube.com /watch?v=some_id&lt;/a&gt;</code></p>
  
  <p>So I have problems with special characters.
  How can I solve this problem?</p>
  
  <p>The last thing I want to ask is that I don't want the user do JavaScript/HTML injection.
  The only ways I want are the two I said above. Example: if a user types <code>&lt;/body&gt;</code> then I can't see it because I use <code>$(".message").html(...)</code>.</p>
  
  <p>If I use <code>.text()</code> I solve the last problem but I can't see images and youtube links.</p>
  
  <p>I cut <code>youtube_url</code> because the system believes that I am a spammer.</p>
  
  <p>jsfiddle code: <a href="http://jsfiddle.net/Fb9kA/1/" rel="nofollow">http://jsfiddle.net/Fb9kA/1/</a> </p>
  
  <p>The <code>&amp;</code> character of the YouTube url is confused with <code>data: "name="+$(".chat_username").val()+"&amp;message="+$(".chat_text").val(),</code> </p>
  
  <p>I fixed it to this:   <code>data: "name="+escape($(".chat_username").val())+"&amp;message="+escape($(".chat_text").val()),</code> </p>