9

次の文字列とその数値を持つことを検討してください。

ここに画像の説明を入力

次に、ユーザーが textbox:1|17|7|19に入力できるようにします。次のようにテキストを強調表示するにはどうすればよいでしょうか。

ここに画像の説明を入力

スペースと段落で計算するときに機能させることができますが、空白と改行をすべて完全に削除すると (「Thisissomedummytext」など)、これを達成する方法がわかりません。

編集

これは私がこれまでに持っているもので、スペースと改行を考慮しています (nl は 1 文字としてカウントされます)。

4

2 に答える 2

2

これが役立つかどうかはわかりませんが、次のとおりです。

http://jsfiddle.net/mCsuH/1/

これは最もクリーンではありません。また、jQuery を使用しているかどうかもわかりませんでした (その方が簡単かもしれません)。このイベントがいつどのように行われるかなど、多くのことが変更されると思います。すべての onkeyup イベントの出力を完全に再構築するのはおそらく最善ではありません。

更新しました：

(スペースをサポートするため)

http://jsfiddle.net/mCsuH/2/

新しいアップデート：

(すべての空白をサポートするため)

http://jsfiddle.net/4HFLx/1/

(@eminor によって提供された以前の問題を実際に修正するための新しいロジック)

于 2012-10-05T14:24:05.643 に答える
1

2つのインデックスがあります。1つはテキストを反復するためのもので、もう1つは文字を数えるためのものです。

（私はあなたのフィドル@ianpgallをフォークしました）

http://jsfiddle.net/FZHuj/1/

function update() {
    var text = document.getElementById("orig_input").value;
    var mask = document.getElementById("mod_input").value.split("|");

    var char = 0;
    var result = '';
    for (var i = 0; i < text.length; i++) {
        if (/\s/.test(text[i])) {
            result += text[i];
            continue;
        }

        char++;

        if (mask.indexOf(char) === -1)
            result += text[i];
        else
            result += '<span class="mod">' + text[i] + '</span>';
    }

    document.getElementById("output").innerHTML = result;
}

「char」インデックスは有効な文字をカウントし、「mask」配列でこのインデックスを探します。

「i」インデックスは、入力テキストを繰り返すために使用されます。</ p>

于 2012-10-05T14:43:47.950 に答える