web-dev-qa-db-ja.com

Javascript：元の大文字と小文字を保持しながら部分文字列を強調表示しますが、大文字と小文字を区別しないモードで検索します

「提案検索ボックス」を作成しようとしていますが、元の大文字と小文字を維持したままJavaScriptで部分文字列を強調表示できるソリューションが見つかりません。

たとえば、「ca」を検索すると、大文字と小文字を区別しないモードでサーバー側を検索すると、次の結果が得られます。

電卓

カレンダー

ESCAPE

これまでのすべての単語の検索文字列を表示したいので、結果は次のようになります。

Calculator

caレンダー

ESCAPE

私は次のコードで試しました：

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

しかし、明らかにこのようにして、私は元のケースを失います！

この問題を解決する方法はありますか？

javascriptregexcase-sensitivecase-insensitive
28
Giovanni Di Milia

.replace()の2番目の引数に関数を使用して、タグが連結された実際に一致した文字列を返します。

試してみてください：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/

56
user113716

ES6バージョン

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

これまでの他の回答は単純に見えますが、適切なテキスト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
    hl.innerText = m
    left = right.slice(0, i)
    right = right.slice(i + m.length)
    result.Push(document.createTextNode(left), hl)
    if (!right.length) return result
  }
  result.Push(document.createTextNode(right))
  return result
}
1
rosenfeld

すべてを下位文字に置き換えるため、完全ではありません。

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

check('ca')
Calculator

calendar

ESCAPE

Cardan de voiture cassé
1
NVRM

素晴らしい結果

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>'});
}

そして覚えやすい... user113716へのthx： https://stackoverflow.com/a/3294644/2065594

0
Cyril Jacquart

私はまったく同じことをします。

コピーを作成する必要があります。

私はdbに実際の文字列のコピーをすべて小文字で保存します。

次に、小文字バージョンのクエリ文字列を使用して検索するか、大文字と小文字を区別しない正規表現を実行します。

次に、メイン文字列で見つかった開始インデックスとクエリ文字列の長さを使用して、結果内のクエリ文字列を強調表示します。

大文字と小文字が区別されないため、結果にクエリ文字列を使用することはできません。 original文字列の一部を強調表示する必要があります。

0
Larry K

検索語を強調表示し、最初の出現に固定します-開始

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
}

検索語を強調表示し、最初の出現に固定します-終了

0
PradeepKN