Geek Answers Handbook

JS selects consistent content x times

How can you highlight x occurrences

How can you distinguish in pure JS only a limited subset of matches from typing, so that in each match only x number of highlights is accepted.

var matches = new Array('fox', 'dog');
var MaxHighlights = 2;

Original text

A quick brown fox jumps over a lazy dog, but a lazy dog ​​quickly watches a brown fox. In general, a fox and a dog are not suitable.

Highlighted Content

A quick brown fox jumps onto a lazy dogbut lazy dog quickly mark to catch a brown fox . In general, a fox and a dog are not suitable.

For extra points, I would prefer to single out only one match per offer.

Preferred Selected Content

, . .

http://www.the-art-of-web.com/javascript/search-highlight

+4
2

replace() word-border g.

, . , , , JS. , :)

// test it
var WordsToMatch = new Array('fox', 'dog');

var MaxHighlights = 2;  // no limit = 0

var TestStr = 
'The quick brown fox jumps over the lazy dog but the lazy dog is '+
'quick of the mark to catch the brown fox. In general the ' +
'fox versus the dog is not a good match.';

document.write(highlight(TestStr, WordsToMatch, MaxHighlights));

// --- JOHNNY 5 WORD HIGHLIGHTER ---

// highlight words in str using a callback function
function highlight (str, words, limit)
{
  for(var i = 0; i < words.length; i++)
  {
    // match each word case insensitive using word-boundaries
    var pattern = new RegExp("\\b" + words[i] + "\\b","gi");

    var j = 0;
    str = str.replace(pattern, function (w) {
      j++; return ((limit <= 0) || (j <= limit)) ? "<b>" + w + "</b>" : w;
    });
  }

  return str;
}

, .

:

, , . , .

: , ...

.

, , , . , : ? , split-sequence (var sep_punct), , .

var WordsToMatch = new Array('fox', 'dog');

var TestStr = 
'The quick brown fox jumps over the lazy dog but the lazy dog is '+
'quick of the mark to catch the brown fox. In general the ' +
'fox versus the dog is not a good match.';

// --- JOHNNY 5 FIRST WORD IN SENTENCE HIGHLIGHTER ---

// highlight first occurence of word in each sentence
function higlight_first_w_in_sentence(str, words)
{
  // split the string at what we consider a sentence:
  // new sentences usually start with upper letters, maybe digits
  // split-sequence: sep_punct, followed by one or more whitespaces,
  // looking ahead for an upper letter or digit
  var sep_punct = '[.;?!]';

  // set the split-pattern, starting with sep_punct
  var pattern = new RegExp(sep_punct + "\\s+(?=[A-Z0-9])", "g");

  // remember split-sequence
  var sep = str.match(pattern); 

  // split str into sentences
  var snt = str.split(pattern); 

  // check sentences split
  if((typeof snt != 'undefined') && (Object.prototype.toString.call(snt) === '[object Array]'))
  {
    // now we loop through the sentences...
    for(var i = 0; i < snt.length; i++)
    {
      // and match each word case insensitive using word-boundaries (zero-with)
      for(var j = 0; j < words.length; j++)
      {
        var pattern = new RegExp("\\b" + words[j] + "\\b", "i");

        // and replace it with highlighted reference 0,
        // which is $& in JS regex (part, that matches the whole pattern)
        snt[i] = snt[i].replace(pattern, "<b>$&</b>");
      }
    }

    // if seperators, rejoin string
    if((typeof sep != 'undefined') && (Object.prototype.toString.call(sep) === '[object Array]') && (sep.length > 0) && 
       (typeof snt != 'undefined') && (Object.prototype.toString.call(snt) === '[object Array]') && (snt.length > sep.length)
      )
    {
      var ret = "";
      for(var j = 0; j < snt.length; j++)
      {
        if(j>0) {
          ret += (typeof sep[j-1] != 'undefined') ? sep[j-1] : " ";
        }

        ret += snt[j];
      }

      return ret;
    }

    // if no seperators
    return snt.join(" ");
  }

  // if failed
  return str;
}

document.write(higlight_first_w_in_sentence(TestStr, WordsToMatch));

:

, . .

+4

JavaScript , :

matches = new Array('fox', 'dog');
originalContent = 'The quick brown fox jumps over the lazy dog but the lazy dog is quick of the mark to catch the brown fox. In general the fox versus the dog is not a good match.';

document.write(
                highlight(originalContent, matches, 2)
                + '<br>' +
                preferredHighlight(originalContent, matches, 2)
);

function highlight(input, matches, max){
    var matchesStatistics = new Array();
    for(i = 0, c = matches.length; i < c;i++){ // Performance !!!
        matchesStatistics[matches[i]] = 0;
    }
    var re = new RegExp('\\b(?:' + matches.join('|') + ')\\b', 'g'); // Words regex
    var highlightedContent = input.replace(re, function(group0){
        matchesStatistics[group0]++;
        if(matchesStatistics[group0] > max){
            return group0;
        }else{
            return '<b>' + group0 + '</b>';
        }
    });
    return highlightedContent;
}

function preferredHighlight(input, matches, max){
    var sentenceRe = new RegExp('[\\s\\S]*?(?:[.?!]|$)', 'g'); // Sentence regex
    var wordRe = new RegExp('\\b(?:' + matches.join('|') + ')\\b', 'g'); // Words regex

    var highlightedContent = input.replace(sentenceRe, function(sentence){
        var matchesStatistics = 0;
        modifiedSentence = sentence.replace(wordRe, function(group0){
            matchesStatistics++;
            if(matchesStatistics > max){
                return group0;
            }else{
                return '<b>' + group0 + '</b>';
            }
        });
        return modifiedSentence;
    });
    return highlightedContent;
}

:

, , . , .

, . .

Regex

  • regex: .join('|') , . \\b(?:fox|dog)\\b. \b, , fox, - firefox. . , , g, " ".
  • : , :
    • [\\s\\S]*?: , .
    • (?:[.?!]|$): ., ?, !, .
    • g : .

:

, , , . , :

var matchesStatistics = new Array();
for(i = 0, c = matches.length; i < c;i++){ // Performance !!!
    matchesStatistics[matches[i]] = 0;
}

, :

Array(
    "fox" => 0,
    "dog" => 0
)

, , , .

:

, ( ). .

-

:

+2

More articles:


All Articles