Bookmarklet to open user defined link and make user defined form drop-down box selections
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/开发者_如何学GohgTracks?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_chrCHROMOSOME_duplicates_standard_len_triangle HS1328_chr_CHROMOSOME_duplicates_standard_len_triangle HS1329_dpwg_chr_chrCHROMOSOME_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
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!
精彩评论