9

Consider having the following string and it's numerical value:

enter image description here

You then allow the user to type in to a textbox: 1|17|7|19, how would I be able to highlight the text as follows:

enter image description here

I can have it work when calculating in spaces and paragraphs, but when I completely remove all white space and new lines (e.g. "Thisissomedummytext") I cannot work out how I would go about achieving this.

EDIT

This is what I have so far, it takes into account spaces and new lines (nl's count as 1 char).

Prisoner
  • 27,391
  • 11
  • 73
  • 102

2 Answers2

2

I'm not sure if this helps, but:

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

It's not the cleanest, and I wasn't sure if you were using jQuery (where it might be easier to do). I'm sure plenty would be changed, such as how/when this event is happening. It's probably not the best to completely rebuild the output for every onkeyup event.

UPDATED:

(to support spaces)

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

NEW UPDATE:

(to support all whitespace)

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

(new logic to actually fix my previous problem provided by @eminor)

Ian
  • 50,146
  • 13
  • 101
  • 111
  • This is how my current example works (note in the question I do not class white space as a char). If I do this: http://i.imgur.com/X0tD5.png it should highlight "m". – Prisoner Oct 05 '12 at 14:26
  • 1
    Ooooooh, I see. Okay, I'll see what I can do – Ian Oct 05 '12 at 14:27
  • @Prisoner Just updated my answer with the new fiddle. Again, I'm sure it's not the cleanest. I only support spaces, but it would be easy to update to use regex to catch whitespace in general. I was like trying a million things to get it to work. I hope this is better! – Ian Oct 05 '12 at 14:55
  • its a decent attempt however if you type in input: "this is a test" (it misses out the "e") and the modifier "8" doesn't highlight the "t". It's a bit of a tough one! – Prisoner Oct 05 '12 at 14:57
  • @Prisoner Well crap. Haha, I only tested with one space - just tried to "finish" it faster. Thanks though, I'll keep trying – Ian Oct 05 '12 at 15:03
  • @eminor Wow, so simple. I don't know why I was getting so confused. Is there a difference between using `[i]` and `charAt(i)`? Actually, just looked it up, and it looks like `charAt` will return an empty string if the index is > length, while `[ ]` returns `undefined`. Interesting – Ian Oct 05 '12 at 16:12
  • 1
    @Prisoner Updated again with eminor's fix, and support for all whitespace. Looks better/complete...up to you though! – Ian Oct 05 '12 at 16:13
  • @eminor & ianpgall, thanks a lot for your help! I had seen eminor's reply and was working on trying to get it to work exactly how I need. Thanks a lot guys! – Prisoner Oct 05 '12 at 16:16
  • @ianpgall Array-like character access is not part of ECMAScript 3. It's a JavaScript and ECMAScript 5 feature. See http://stackoverflow.com/questions/5943726/string-charatx-or-stringx – eminor Oct 05 '12 at 16:55
  • @eminor Huh. Had no idea. Great thing to learn and start using :) Thanks! – Ian Oct 05 '12 at 16:57
1

What about have two index, one for iterate the text and another to count the characters?

(I've forked your fiddle @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;
}

The "char" index counts the valid characters, and we look for this index on the "mask" array.

The "i" index is used to iterate the input text.​

A. Matías Quezada
  • 1,886
  • 17
  • 34