从字符串中跳过空格

时间:2013-12-09 21:05:18

标签: javascript jquery

如何在我的小脚本中跳过计算和着色的whitespacing? 它在我的脚本中计算并着色,我没有线索如何跳过它,而不是影响角色。所以关键是要为每个第二个字母着色。有什么提示吗?

我知道如何使用jQuery,但我正在练习JavaScript。

JS Fiddle DEMO

var div = document.createElement('div'),
    first = 'First JavaScript string.',
    second = 'This is second text.',
    combine = first + ' ' + second,
    colored = '';

div.id = 'sort-text';
document.getElementsByTagName('body')[0].appendChild(div);

for (i = 0; i < combine.length; i++) {
    if (i % 2 == 1) {
        colored += '<span style="color: #d10;">' + combine[i] + '</span>';
    } else {
        colored += combine[i];
    }
}

div.innerHTML = colored;

5 个答案:

答案 0 :(得分:2)

试试这个:

var space_offset = 0;
for (i = 0; i < combine.length; i++) {
    if ( combine[i] == ' ' ) {
        space_offset++;
        colored += combine[i];
    } else if ( ( i + space_offset ) % 2 == 1) {
        colored += '<span style="color: #d10;">' + combine[i] + '</span>';
    } else {
        colored += combine[i];
    }
}

我添加了一个偏移量变量,可以保持忽略空格的每个其他字母都应该着色。

答案 1 :(得分:2)

您可以列出您不想计算的内容,例如空格,并使用单独的变量而不是依赖于字符索引。

var useRed = false;

for (i = 0; i < combine.length; i++) {
    if (combine[i] != ' ') {
        if (useRed) {
            colored += '<span style="color: #d10;">' + combine[i] + '</span>';
            useRed = false;
        } else {
            colored += combine[i];
            useRed = true
        }
    }
    else {
        colored += combine[i];
    }
}

这是fiddle

答案 2 :(得分:2)

我建议你使用map。对于这个问题,它比for循环要干净得多。

例如:

var curr = -1;
colored = combine.split("").map(function(x) {
    if (x === " ") return x; // Ignore space
    curr++; // Otherwise, increment
    if (curr % 2 === 1)
      return '<span style="color: #d10;">' + x + '</span>';
    return x;
}).join("");

您可以轻松扩展此功能,以包含其他标点符号和模式。

例如,如果我们想忽略句点和空格,我们可以这样做:

var curr = -1;
var ignore = ". "; // Ignore space and period
colored = combine.split("").map(function(x) {
    if (ignore.indexOf(x) >= 0) return x;
    curr++;
    if (curr % 2 === 1)
      return '<span style="color: #d10;">' + x + '</span>';
    return x;
}).join("");

FIDDLE

答案 3 :(得分:1)

似乎是continue的任务:

var i, len, str, bol, curr_char, new_str;

str = "hello wolrd this is a test.";
new_str = "";
bol = false;

for(i=0, len=str.length; i<len; i++){
    curr_char = str.charAt(i);

    if(curr_char===" "){
        new_str += curr_char;
        continue;
    }

    if(bol){
        new_str += "<span style='color: #d10;'>" + curr_char + "</span>";
    }else{
        new_str += curr_char;
    }

    bol = !bol;
}

console.log(new_str);

答案 4 :(得分:1)

这是另一种选择:

var i, len, old_str, new_str, color_toggler, current_char, is_space;

old_str = "hello world this is a test.";
new_str = "";
color_toggler = true;

for(i=0, len=old_str.length; i<len; i++){
    current_char = old_str.charAt(i);
    is_space = (current_char===" ");

    if(!is_space){
        color_toggler = !color_toggler;
    }

    if(color_toggler || is_space){
        new_str += current_char;
    }else{
        new_str += "<span style='color: #d10;'>" + current_char + "</span>";
    }
}

console.log(new_str);