2

ドット '.' の位置を探す非常に単純なループを作成しました。文字列内のスペースとスペースをスライスして配列にプッシュします。ループは、最後のドットが見つかったときに終了する必要があります。ループが引用符を正しく終了せず、二重の出力が得られるため、私は間違いを犯していると思います。

コードは次のとおりです。

var str = '.boom .style #foo .media';
var p = 0;
var className = [];
searchLoop: for(i = 0; i < str.length; i ++) {
    var n = str.indexOf('.', p);
    var o = str.indexOf('#');
    var p = str.indexOf(' ', n) ;
    if(str.indexOf('#') >= 0)
        var idName = str.slice(o + 1, n);
    if(str.lastIndexOf('.') !== n)
        className.push(str.slice(n + 1, p));
    console.log(className);
    console.log(idName);
    if(str.lastIndexOf('.') === n) {
        className.push(str.slice(n + 1, p) + str[str.length - 1]);
        break searchLoop;
    }
}

出力は次のとおりです。

["boom", "style", "media"]
["boom", "style", "media"]
["boom", "style", "media"]
foo

「#」も選択できるようにコードを少し編集したところ、今回は 3 倍の結果が得られました。

4

3 に答える 3

1

MathSquared11235 が言ったように、車輪を再発明する必要はありませんが、答えは単一の単純な分割方法を使用するほど単純ではないことが判明しました.

「。」を区別する方法は次のとおりです。および「#」は、elclanrs が提案したように RegExp を使用します。

var str = '.boom .style #foo .media';
var className = str.match(/[.]\w+/g); // match for words that begin with '.'
var idName = str.match(/[#]\w+/g); // match for words that being with '#'
className = className.join(''); // join all items so we have a string to play with
className = className.replace(/[.]/g,' '); // replace all '.' with ' '
className = className.replace(' ', ''); // remove the first ' '
className = className.split(' '); // split the className using ' ' separator so we have an array again. 
idName = idName.toString(); // make it a string
idName = idName.replace('#',''); // just remove the '#'
console.log(className);
console.log(idName);

これは出力になります：

["boom", "style", "media"]
foo

これを行う別の方法は次のとおりです。

var str = '.boom .style #foo .media';
var cssSelectors = str.split(' ');
var className = [];
searchLoop: for(i = 0; i < cssSelectors.length; i ++) {
if(cssSelectors[i].indexOf('#') > -1 && cssSelectors[i] && cssSelectors[i] !== '#')
    var idName = cssSelectors[i].replace('#', ''); // just to make it foolproof and make sure no empty string and stand alone '#' pass through
if(cssSelectors[i].indexOf('.') > -1 && cssSelectors[i] && cssSelectors[i] !== '.')
    className.push(cssSelectors[i].replace('.', '')); // no '' and no stand alone '.' can pass through
console.log(className);
console.log(idName);
}

出力は次のようになります。

["boom", "style", "media"]
foo
["boom", "style", "media"]
foo
["boom", "style", "media"]
foo
["boom", "style", "media"]
foo
于 2013-07-14T03:01:05.813 に答える
1

私はあなたの結果を再現できません ここにあなたのコードのJSFiddleがあります http://jsfiddle.net/q34gt/

これがChromeで得られる出力です

["boom"]
["boom", "style"] 
["boom", "style"] 
foo

これは、コーディングロジックによれば正しいです。

コードを実行した後にコンソールを開くと、次の出力が得られます

["boom", "style", "media"]
["boom", "style", "media"]
["boom", "style", "media"]
foo

3 つの項目がすべて配列に追加された後にコンソールが className を読み取るため、取得したものと同じです。

mozilla を試してみたところ、あなたと同じ出力が得られましたが、コードが期待どおりに実行されており、ループも中断しているので安心してください。コンソールログをアラートに置き換えただけで、以下で説明するように期待される結果が得られます。ここにフィドル http://jsfiddle.net/q34gt/1/があります

この特定の if ステートメントの実行後、className 配列は反復ごとにコンソールに表示されます

if(str.lastIndexOf('.') !== n)
        className.push(str.slice(n + 1, p));
  • 上記の if の後の最初の反復で、className 配列に [boom] が含まれます。
  • 上記の if の後の 2 回目の反復で、className 配列に [boom, style] が含まれます。
  • 上記の if が実行された後の 3 回目の反復では、str.lastIndexOf('.') !== n 条件が失敗し、className.push(str.slice(n + 1, p)) が含まれるため、className 配列には [boom, style] が含まれます。 ; 実行されません
于 2013-07-14T02:19:12.763 に答える
1 
var temp = str.split('.')

for(var i = 1; i < temp.length; i++){
  className.push(temp[i].trim())
}

ループの終了は単純な方法で行われbreak;ます。別の方法として、コードを関数に移動し、関数return className;だけでなくループからも抜け出すことでループを終了できます。

ただし、早期終了を必要としない上記の代替ソリューションを提供しました

于 2013-07-14T01:06:04.210 に答える