Passing Strings with !,' '... symbols into jquery append

Question

I'm working with Goolge Apis using javascript and jquery

The problem is some YouTube Channel's Titles have 'SPACE' OR ! OR ... symbols

So I need to pass those Titles as Strings but even then I get error

Error: Syntax error, unrecognized expression: #channelBomB!

My code is below

function placeChannelVideoIds(YouTubeChannelTitle){

    $('#channel'+String(YouTubeChannelTitle)).append('\
        <H1>YouTubeChannelTitle</H1>>);

}
placeChannelVideoIds(String(YouTubeChannelTitle));

Answer 1

It is not about the string you try to append, it is the id can't have any whitespace, tag or !, basically, you can only use a-zA-Z, 0-9, _-.

id in HTML 4

For HTML 4, ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

id in HTML 5

HTML 5 accept '_', '-' and '.' if not at the beginning fo the id. It is also a true global attribute.

id attribute's value must not contain whitespace (spaces, tabs etc.). Browsers treat non-conforming IDs that contain whitespace as if the whitespace is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID.

REF: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

---

Solution:

Ok, so you can't use any string in id, but you can hash the string to get a unique number and used as an id, and you hash the same string you always get the same unique id.

Then your code will look like this (add the sdbmCode function to your code):

function placeChannelVideoIds(YouTubeChannelTitle){
    var hash_id = sdbmCode(YouTubeChannelTitle);
    $('#channel'+ hash_id).append('<h1>'+YouTubeChannelTitle+'</h1>');
}
placeChannelVideoIds(YouTubeChannelTitle);

As you can see in the below code example, any string can be hashed into a unique id (well, it is very very very rare you will get the same id from two different string(like winning lottery 3 times in a row)).

REF: http://erlycoder.com/49/javascript-hash-functions-to-convert-string-into-integer-hash-

sdbmCode = function(str){
    var hash = 0;
    for (i = 0; i < str.length; i++) {
        char = str.charCodeAt(i);
        hash = char + (hash << 6) + (hash << 16) - hash;
    }
    return Math.abs(hash);
}

var str1 = 'BomB!';
var str2 = 'Bo mB!';
var str3 = '!!$%#^^@';
var str4 = 'test!!$%#^^@';
var str5 = 'test!!$%#^^@!';
var str6 = '"test!!$%#^^@"';

console.log('hash '+str1+'    -->'+sdbmCode(str1));
console.log('hash '+str1+'    -->'+sdbmCode(str1));
console.log('hash '+str2+'   -->'+sdbmCode(str2));
console.log('hash '+str3+'        -->'+sdbmCode(str3));
console.log('hash '+str4+'    -->'+sdbmCode(str4));
console.log('hash '+str5+'    -->'+sdbmCode(str5));
console.log('hash '+str6+'   -->'+sdbmCode(str6));