Javascript createRange. How to select different spans with only one script?

Question

I have use this script to get some text highlighted by clicking a single time

<script type="text/javascript">
$('#maincode').click(function(){
var span = $('.selectcode')[0],
    sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

Which is applied to a code block:

<code id="maincode">
<span class="selectcode">
TEXT that gets selected by clicking
</span>
</code>

How can i use this script to highlight multiple code blocks withoud copying the script again and again with new IDs? Another code block could be like this:

<code id="secondcode">
<span class="selectcode">
Another block
</span>
</code>

I tried to do it this way an failed:

$('#maincode, #secondcode').click(function(){
var span = $('.selectcode')[0],
    sel, range;

Thank you guys!

EDIT:

<code id="maincode" data-target="#text1"><span id="text1">test</span></code>
<code id="secondcode" data-target="#text2"><span id="text2">test</span></code>

<script type="text/javascript">
$('#maincode, #secondcode').click(function(){
    var targetBlockId = $(this).attr("data-target");
    var targetBlock = $(targetBlockId);

    sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

Answer 1

Update 3:

On click to the span select text in it. I used classes instead of ID.

<span class="span-for-selection">texty text</span>
<span class="span-for-selection">texty text</span>
<span class="span-for-selection">texty text</span>

$('.span-for-selection').click(function() {
    var span = $(this);
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select();
})

Added as answer on comments

If yo want use 2 different buttons for selecting from 2 different blocks you just need on the each button specify some attribute, that will contain info about block for selection, for example buttons and blocks:

<input type="button" id="btn1" data-target="#text1"/>
<span id="text1">Some text</text>
<input type="button" id="btn2" data-target="#text2"/>
<span id="text2">Some another text</text>

So function will look as:

$("#btn1, #btn2").click(function() {
    var targetBlockId = $(this).attr("data-target");
    var targetBlock = $(targetBlockId);
    // do what you want with your span 'targetBlock'
})

Original answer:

I'm not sure what you're trying to do, but to select a lot of elements for highlighting you need just pass them into jQuery function $('#idOfFirstBlock, #idOfSecondBlock') and than call on it anything that you want, for example

$('#idOfFirstBlock, #idOfSecondBlock').each(function(){ /* some actions*/})

it will apply on each element that satisfies to id's/class names/tag names and etc passed into jQuery. To get pointer to current element from each function you can simply use $(this) or check documentation and find which arguments passes in the function, one of them will be target element (I suppose that 3rd or 1st, but not remember exactly).

In your example you're adding on click event listener that just select some element by class name and not doing anything.

Moreover, I don't think that you need this, but for highlighting better way it's use some CSS class that defines some color .highlight {background-color: red;} and than apply it to each element that you want highlight as I described above (classes applied with $('...').addClass('class-name') . If you need select some part of text - wrap this part of text into some tag with this class.

Answer 2

Try to replace with:

<code id="maincode" data-target="#text1"><span id="text1">test</span></code>
<code id="secondcode" data-target="#text2"><span id="text2">test</span></code>

<script type="text/javascript">
$('#maincode, #secondcode').click(function(){
    var span = $($(this).attr("data-target")), sel, range;

if(window.getSelection){
    sel = window.getSelection();
    range = document.createRange();

    range.selectNode(span);
    sel.removeAllRanges();
    sel.addRange(range);
 } else {
    range = document.body.createTextRange();
    range.moveToElementText(span);
    range.select()
 }
});
</script>

Answer 3

I ended up using

<script type="text/javascript">
$('.select').click(function (){
    var range, selection;

    if (window.getSelection && document.createRange) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    }
});
</script>

Thanks @reconnect & @J. Doe !!