Question

我正在尝试编写一个“建议搜索框”，我找不到一个允许使用javascript保留原始案例的子字符串突出显示的解决方案。

例如，如果我搜索“ca”我在不区分大小写模式下搜索服务器端，并且我有以下结果：

计算器

日历

ESCAPE

我想在之前的所有单词中查看搜索字符串，因此结果应为：

的Ca lculator

CA lendar

ES的 CA PE

我尝试使用以下代码：

var reg = new RegExp(querystr, 'gi');
var final_str = 'foo ' + result.replace(reg, '<b>'+querystr+'</b>');
$('#'+id).html(final_str);

但显然这样我放松了原来的情况！

有没有办法解决这个问题？

Answer 1

对.replace()的第二个参数使用函数，该函数返回带有连接标记的实际匹配字符串。

试一试： http://jsfiddle.net/4sGLL/

reg = new RegExp(querystr, 'gi');
       // The str parameter references the matched string
       //    --------------------------------------v
final_str = 'foo ' + result.replace(reg, function(str) {return '<b>'+str+'</b>'});
$('#' + id).html(final_str);

带输入的JSFiddle示例： https://jsfiddle.net/pawmbude/

Answer 2

ES6版

const highlight = (needle, haystack) =>
  haystack.replace(new RegExp(needle, 'gi'), str => `<strong>${str}
</strong>`)

Answer 3

不完全完美，因为它用较低的字符替换所有字符：

＆＃13;

let ߐ = document.body
function check(_ૐ){
_ૐ_ = new RegExp(_ૐ, "ig") 
ߐ.innerHTML=ߐ.innerHTML.replace(_ૐ_,"<b>"+_ૐ+"</b>")
}

check('ca')

＆＃13;

Calculator

calendar

ESCAPE

Cardan de voiture cassé

＆＃13;

Answer 4

我做同样的事情。

你需要复制一份。

我在db中存储了一个真实字符串的副本，全部为小写。

然后我使用查询字符串的小写版本进行搜索，或者使用不区分大小写的正则表达式。

然后在主字符串中使用结果找到的起始索引加上查询字符串的长度，以突出显示结果中的查询字符串。

您不能在结果中使用查询字符串，因为它的大小写是不确定的。您需要突出显示原始字符串的一部分。

Answer 5

的好结果

function str_highlight_text(string, str_to_highlight){
   var reg = new RegExp(str_to_highlight, 'gi');
   return string.replace(reg, function(str) {return '<span style="background-color:#ffbf00;color:#fff;"><b>'+str+'</b></span>'});
}

更容易记住...... thx到user113716：https://nodejs.org/en/blog/npm/peer-dependencies/

Answer 6

虽然到目前为止其他答案看起来很简单，但它们无法真正用于许多现实世界的案例中，因为它们无法处理正确的文本HTML转义和RegExp转义。如果你想突出显示每个可能的片段，同时正确地转义文本，这样的函数将返回你应该添加到你的建议框中的所有元素：

function highlightLabel(label, term) {
  if (!term) return [ document.createTextNode(label) ]
  const regex = new RegExp(term.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'), 'gi')
  const result = []
  let left, match, right = label
  while (match = right.match(regex)) {
    const m = match[0], hl = document.createElement('b'), i = match.index
    b.innerText = m
    left = right.slice(0, i)
    right = right.slice(i + m.length)
    result.push(createTextNode(left), hl)
    if (!right.length) return result
  }
  result.push(createTextNode(right))
  return result
}

Answer 7

突出显示搜索词并锚定至首次出现-开始

function highlightSearchText(searchText) {
    var innerHTML = document.documentElement.innerHTML;
    var replaceString = '<mark>'+searchText+'</mark>';
    var newInnerHtml = this.replaceAll(innerHTML, searchText, replaceString);
    document.documentElement.innerHTML = newInnerHtml;
    var elmnt = document.documentElement.getElementsByTagName('mark')[0]
    elmnt.scrollIntoView();
}

function replaceAll(str, querystr, replace) {
    var reg = new RegExp(querystr, 'gi');
    var final_str = str.replace(reg, function(str) {return '<mark>'+str+'</mark>'});
    return final_str
}

突出显示搜索词并锚定至首次出现-结束

Answer 8

.match()执行不区分大小写的匹配，并返回一个完整的大小写匹配数组。

var matches = str.match(queryString),
    startHere = 0,
    nextMatch,
    resultStr ='',
    qLength = queryString.length;

for (var match in matches) {
    nextMatch = str.substr(startHere).indexOf(match);
    resultStr = resultStr + str.substr(startHere, nextMatch) + '<b>' + match + '</b>';
    startHere = nextMatch + qLength;
}

Answer 9

我找到了一种最简单的方法来实现它。 JavaScript正则表达式会记住它匹配的字符串。此功能可在此处使用。

我稍微修改了一下代码。

reg = new RegExp("("+querystr.trim()+")", 'gi');
final_str = 'foo ' + result.replace(reg, "<b>&1</b>");
$('#'+id).html(final_str);

Javascript：突出显示保留原始案例的子字符串，但在不区分大小写的模式下搜索

9 个答案: