Question

I’m creating an auto complete and I’m having a little problem the results highlighting. You see my searching algorithm is very generous and ignores apostrophes in the result so therefore a query like joes will match Joe's. The search algorithm is taken care of and now comes the highlighting part. I wanted to make the matched pattern bold.

Let’s say I had an original unformatted result: Joe’s (take note the rsquo \u2019) and I wanted to highlight it like this: Joe’s, for the following queries joes, joe's, and joe’s (rsquo \u2019)

I included the right side single quotation mark in the query because you wouldn’t know if someone was copying a query from a word document or something.

I could easily do it by ignoring the fact that the quotation marks are there in both search/result strings but that would mess up the whole point of the search when you accidentally type something like joes' or even worse jo'es. So I somehow need to preserve the quote position. Also please take note that an apostrophe can also be anywhere in the unformatted result string like so Suq'Ata.

Here are a list of scenarios:

---

• String: Liliana's
• Queries: lilianas, liliana's
• Result: Liliana's

---

• String: Suq'Ata
• Queries: suqat, suq'at
• Result: Suq'Ata

---

• String: Telim'Tor's
• Queries: telimt, telim't
• Result: Telim'Tor's

---

It should be noted that the position of the quotes in the query is important whereas when you misplace a quote in your query, it should not match at all. So it’s either you have the correct quote position, or no quotes at all to highlight the original string.

I actually don’t mind if a proposed solution is to break apart each letter and loop through it (have thought about it) since I’ll just be doing this to up to 5 strings at a given time. I’m looking forward to your suggestions!

Answer 1

Updated question specs from asker:

1. If the user’s query has a quote, its position must match the quote of the original string. Eg. query “jo’es” does not match original string “Joe’s”.
2. We only need to bother matching the start of the query with the start of the original string.

---

I can think of better algorithms, but to start here’s a quick and dirty first stab at it, using the naive loop over each letter method:

var quotesRegex = /['\u2019]/g;

function highlightMatch(origStr, query) {        
    query = query.toLowerCase();

    var j = 0;
    for (var i = 0; i < query.length; ++i, ++j) {
        // Query has a quote; it needs to be in the same position as origStr
        if (query.charAt(i).match(quotesRegex)) { 
            if (!origStr.charAt(j).match(quotesRegex)) {
                return origStr;  // quote position mismatch
            }
            continue;
        }

        while (origStr.charAt(j).match(quotesRegex)) {
            j++;                
        }

        if (origStr.charAt(j).toLowerCase() != query.charAt(i)) {
            return origStr;
        }
    }

    return "<b>" + origStr.slice(0, j) + "</b>" + origStr.slice(j);
}

JSFiddle: http://jsfiddle.net/FFt2T/6/