jQuery: How to divide text-string in half and make one half in different color?

Hello Stackoverflow family :)

I'm in need of a simple jQuery script, but since I'm a beginner in jQuery yet.. Then开发者_运维百科 I cannot figure this out myself :( And there is no such script yet or I just don't know the correct term to search.

Idea is very simple. My designer designs h1 tags with two colors. For example: "Why use mysite.com?" then [mysite.com?] is with different color. I can see the technical solution as being triggered by $("h1.title") and the script would calculate how many words there are. Then divide by 2 and make one half different color with append container around them or something.

How to make this happen?

Kalle

If you really want to use JavaScript to do this, see this fiddle for an example of a method for colouring the second half of the text of an element differently.

It does it by splitting the original string on spaces, determining the halfway point, and then rebuilding the string with a span (with whatever styles you like applied to it) around the second half:

$("h1").each(function() {
    var t = $(this).text();
    var splitT = t.split(" ");
    var halfIndex = Math.round(splitT.length / 2);
    var newText = "";
    for(var i = 0; i < splitT.length; i++) {
        if(i == halfIndex) {
            newText += "<span style='color:#ff0000'>";
        }
        newText += splitT[i] + " ";
    }
    newText += "</span>";
    $(this).html(newText);
});

I'm sure there's a quicker way of doing this, but this is the first thing that came to mind.

I found this thread while searching for a way to spit a chunk of html into two parts, and thought I'd post my solution.

I used regex to return all top level html elements; this regex 'skips' nested elements because they are matched as the middle part of the top level elements.

It's then a simple divide, round and slice it up.

var result = str.match(/<(\w[\w\d]*)[^>]*>.*?<\/\1>/g);
var mid = Math.ceil(result.length / 2);
var part1 = result.slice(0,mid);
var part2 = result.slice(mid);

...or if you prefer 3 parts

var gap = Math.ceil(result.length / 3);
var part1 = result.slice(0,gap);
var part2 = result.slice(gap, gap*2);
var part3 = result.slice(gap*2);

<h1>
    <span style="header-color1">Why use </span> 
    <span style="header-color1">mysite.com?</span>
<h1>

And then style the header-color1 and header-color2 spans accordingly. This will look weird though, having a header in 2 different colors... not very good design imo but maybe your designer has a good idea, not sure.

This would not be overly difficult in jQuery but I think it would be a case of overuse.

You can try smth like that:

//split h1 content by spaces


function color_header(str) {
    var words = str.split(' ');
    var words_num = words.length;

    if (words_num > 1) {
        var first_color_words = Math.floor(words_num / 2);
    } else {
        return str;
    }

    str = '<span class="color-1">';
    for (var i = 0; i < words_num; i += 1) {
        str += words[i];
        if (i === first_color_words - 1) {
            str += '</span><span class="color-2">';
        }
        if (i !== (words_num - 1)) {
            str += ' ';
        }
    }
    str += '</span>';
    return str;
}

Function receives string with title, and returnes html string like <span class="color-1">part 1</span><span class="color-2"> part 2</span>. If there is only 1 word in title - returns initial string