前端搜索精确匹配高亮显示？

Question

多国语言文本搜索时（不止中英文），勾选全词匹配时怎么精确匹配高亮显示（如搜英文in不显示单词becoming，而显示单词in），且搜索中文勾选全词匹配也能正常高亮匹配显示？

Answer 1

用正则来搜索

    <span class="hljs-comment">/**
     * <span class="hljs-doctag">@param</span> s 要匹配的字符
     * <span class="hljs-doctag">@param</span> kw 关键字
     * <span class="hljs-doctag">@param</span> fullMatch  完全匹配
     */</span>
    <span class="hljs-keyword">function</span> <span class="hljs-title function_">isMatch</span>(<span class="hljs-params">s, kw, fullMatch</span>) {
        <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/[\u4e00-\u9fa5]/</span>.<span class="hljs-title function_">test</span>(kw) || !fullMatch) {<span class="hljs-comment">//中文或者模糊匹配用IndexOf</span>
            <span class="hljs-keyword">return</span> s.<span class="hljs-title function_">indexOf</span>(kw) != -<span class="hljs-number">1</span>;
        }
        <span class="hljs-keyword">else</span> {
            <span class="hljs-keyword">var</span> re = <span class="hljs-keyword">new</span> <span class="hljs-title class_">RegExp</span>(<span class="hljs-string">'\\b'</span> + kw + <span class="hljs-string">'\\b'</span>, <span class="hljs-string">'i'</span>);<span class="hljs-comment">//如果大小写也要区分，去掉“,'i'”</span>
            <span class="hljs-keyword">return</span> re.<span class="hljs-title function_">test</span>(s);
        }
    }

    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isMatch</span>(<span class="hljs-string">'如果大小写也要区分'</span>, <span class="hljs-string">'大小'</span>))<span class="hljs-comment">//true</span>
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isMatch</span>(<span class="hljs-string">'becoming'</span>, <span class="hljs-string">'in'</span>))<span class="hljs-comment">//true</span>
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isMatch</span>(<span class="hljs-string">'becoming'</span>, <span class="hljs-string">'in'</span>, <span class="hljs-literal">true</span>))<span class="hljs-comment">//false</span>
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">isMatch</span>(<span class="hljs-string">'in car'</span>, <span class="hljs-string">'in'</span>, <span class="hljs-literal">true</span>))<span class="hljs-comment">//false</span>

中文的话直接indexOf查找，用\b正则查找不到内容