-4

重複の可能性:
JavaScriptで大文字と小文字を区別しない文字列置換?

別の変数値と等しい文字列の一部を強調表示しようとしています。

例えば

var string = 'This Is A Test String';
var findWord = 'test';

結果は

'This Is A <b>Test</b> String'

大文字と小文字を区別せず、「単語の検索/置換」を渡すために変数を使用する必要があることに注意してください

私がそれをする必要がある理由は、これは、検索ワードの==で見つかった文字列の正確な形式/大文字小文字を保持するためでした。

PHPでは、これは機能するので、基本的に私はJSに相当するものを求めています

preg_replace('/('.$search.')/i','<b>$1</b>',$val['name'])

正規表現に関しては私はよくありません。これは誰かにとって簡単なはずです。

4

2 に答える 2

3

私はお勧めします:

var string = "This is a test string.",
needle = "test",
re = new RegExp(needle, "gi"),
newString = string.replace(re, "<strong>" + needle + "</strong>");
console.log(newString);

JS フィドルのデモ

<strong></strong>(意図的に)ではなく使用したことに注意してください<b></b>。ただし、もちろん、好きな要素タイプを使用できます。また、giフラグ:

  • g単に最初の一致で停止するのではなく、グローバル検索用であり、
  • iは大文字と小文字を区別しないため、など'test'と一致します...TesttESt

一致した文字列/部分文字列の大文字化を維持するように編集:

var string = "This is a Test string.",
    needle = "test",
    re = new RegExp(needle, "gi"),
    newString = string.replace(re, function(a,b){
        return "<strong>" + a + "</strong>";
    });

document.getElementById('input').appendChild(document.createTextNode(string));
document.getElementById('result').innerHTML = newString;

JS フィドルのデモ


より機能的/再利用可能なアプローチを作成するために編集されました:

function formatMatches(el, needle, wrapper) {
    if (!el || !needle) {
        return false;
    }
    else {
        var re = new RegExp(needle, "gi"),
            haystack = el.textContent,
            o = '<' + wrapper + '>',
            c = '</' + wrapper + '>';
        return haystack.replace(re, function(a) {
            return o + a + c;
        });
    }
}

var needle = "test",
    el = document.getElementById('input'),
    wrapper = 'strong';

document.getElementById('result').innerHTML = formatMatches(el, needle, wrapper);

JS フィドルのデモ

参考文献:

于 2012-05-30T15:33:00.933 に答える
1
var str = 'This Is A Test String';
var w = 'test';

var result = str.replace(new RegExp(w, 'gi'), function(match) {
  return "<b>" + match + "</b>";
});

編集:または、コメントで示唆されているように、最後の行を次のように置き換えることができます。

var result = str.replace(new RegExp(w, 'gi'), "<b>$&</b>");
于 2012-05-30T15:36:24.783 に答える