私はお勧めします:
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'
と一致します...Test
tESt
一致した文字列/部分文字列の大文字化を維持するように編集:
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 フィドルのデモ。
参考文献: