开发者

Iterate through a string and add tags using javascript

I'm working on a website project and 开发者_JAVA技巧I have a paragraph containing a list of items (it would work great as a ul, but needs to stay a p) that needs to have the first letter of each item bold. I've created a function to do this:

function inserter(string, splitter, skip) {
    var array = string.split(splitter);
    var len = array.length;

    for(var i = 1; i < len; i++) {
        var a = array[i];
        var b = '<b>';
        var c = '</b>';
        if(a.substr(0, 3) != skip){ 
            array[i] = splitter + b + a.substr(0,1) + c + a.substr(1);
        } else { 
            array[i] = splitter + a; 
        }
    }
    var strFix = array.join("");
    return strFix;
}

$(function(){
    var text = $(".caps").html();
    text = inserter(text, ': '); //bold the item after ': '
    text = inserter(text, ', ', 'and'); // now bold after the comma ', ' and the skip variable which matches first three letters so the last and doesn't get bold
    text = inserter(text, ', and '); //now for the item after the last 'and'
    $(".caps").html(text);
});

But it needs to be called and the string iterated for every different splitter (which could ruin performance on pages with more than a few of these), and I'm wondering how I could just call it once so all the splitters are looked at during one iteration?

Example page:

http://heidikratzke.com/about.php

When you see the page, you will see that I will be doing this on multiple paragraphs within a jQuery slideshow.

If it doesn't seem like this will be a performance hit for slower browsers, I'll leave it as is.

Appreciate any suggestions on how to do it better.


One optimization you could make is to use the splitter you use to split the string into an array to join the array once the operation is finished:

function inserter(string, splitter, skip) {
    var array = string.split(splitter);
    var len = array.length;

    for(var i = 1; i < len; i++) {
        var a = array[i];
        var b = '<b>';
        var c = '</b>';
        if(a.substr(0, 3) != skip){ 
            array[i] = b + a.substr(0,1) + c + a.substr(1);
        } else { 
            array[i] = a; 
        }
    }
    return array.join(splitter);

}

There's probably more you could do here as well, but this jumped out at me.

further optimization

The following gets variable declaration out of the loop:

function inserter(string, splitter, skip) {
    var array = string.split(splitter);
    var len = array.length;
    var i, a, b='<b>', c='</b>';

    for(i = 1; i < len; i++) {
        a = array[i];
        if(a.substr(0, 3) != skip){ 
            array[i] = b + a.substr(0,1) + c + a.substr(1);
        } else { 
            array[i] = a; 
        }
    }

    return array.join(splitter);    
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜