Bookmarklet to open user defined link and make user defined form drop-down box selections

Question

I've written a bookmarlet to open a user defined web link, in this specific case a specific genomic location in the UCSC genome broswer.

javascript:d=%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);d=d.replace(/%5Cr%5Cn%7C%5Cr%7C%5Cn/g,%22%20,%22);if(!d)d=prompt(%22Enter%20the%20chromosomal%20location%20(ex.%20chr1:213243007-213243247):%22,%20%22%22);if(d!=null)location=%22http://genome.ucsc.edu/cgi-bin/hgTracks?hgS_doOtherUser=submit&hgS_otherUserName=Denilw&hgS_otherUserSessionName=mrkdOvrExpUniqMonometh&position=%22+escape(d).replace(/%20/g,%22+%22);void%200

There are 24 chromosomes in the human genome that can be displayed and I would like to do the following:

1) Parse the chromosome out of the user entered string

Use a regex in java script to parse 22 from chr22:213243007-213243247 or X from chrX:213243007-213243247

2) Make selections in the dropdown options of the form on UCSC based on the user input

There are 4 tracks or data sets to show for each of the 22 chromosomes, 88 in total. These are available for selection in the Custom Tracks section of UCSC genome browser as per the linke chosen above, say

http://genome.ucsc.edu/cgi-bin/hgTracks?hgS_doOtherUser=submit&hgS_otherUserName=Denilw&hgS_otherUserSessionName=mrkdOvrExpUniqMonometh&position=chr14%3A22%2C409%2C038-22%2C409%2C507

HS0356_chr_CHROMOSOME_duplicates_standard_len_triangle HS0445_dpwg_chr_chr*CHROMOSOME*_duplicates_standard_len_triangle HS1328_chr_CHROMOSOME_duplicates_standard_len_triangle HS1329_dpwg_chr_chr*CHROMOSOME*_duplicates_standard_len_triangle

Then I would like the drop down menus for the above, where CHROMOSOME is defined in part 1 to be changed from Hide to Full so that only the data for the chromosome of interest will be displayed.

Perhaps something like this would be helpful: http://www.codeproject.com/KB/scripting/autoselect.aspx

Answer 1

For your first problem,

var str = "chr22:213243007-213243247";
var result = /chr(\w*):(\d*)-(\d*)/.exec(str);
if(result)
{
    alert(result[1]) // 22
    alert(result[2]) // 213243007
    alert(result[3]) // 213243247
}
else
{
    // User entered invalid string
    alert("Invalid input");
}

If you don't need result[2] and result[3], just ignore them.

I looked at the second part of your question (hopefully I understood it right), and most of the drop-downs on the page look like this:

<select name="ct_HS1329dpwgchrchr17duplicatesstandardlentriangle_5941" class="hiddenText" style="width: 70px">
    <option selected="">hide</option>
    <option>dense</option>
    <option>full</option>
</select>

Now, we can use the following code to get the above select element and set the selected option to 'full': (Edit: added a workaround since full element name can't be predicted)

// Convert "chr17_duplicates_standard_len_triangle" to "chr17duplicatesstandardlentriangle"
var selectText = "chr17_duplicates_standard_len_triangle";
var selectName = selectText.replace(/_/g, "");

// Find the element that contains "chr17duplicatesstandardlentriangle" in
// it's name.
var selectElements = document.getElementsByTagName("select");
for(var i=0;i<selectElements.length;i++)
{
    var ele = selectElements[i];
    var name = ele.name;
    if(name.indexOf(selectName)!==-1)
    {
        ele.selectedIndex = 2;
        break;
    }
}

I don't like this solution since it involves looping through all the select elements on the page when you only need one. If someone knows a better solution, please tell me.

Hope that answers your question!