「\n<br>」と「アルファベット26文字」で構成された文字列の中で変数wordに入った文字列(アルファベット26文字で構成)と一致した場合は「<span class=’abc’>文字列(アルファベット26文字で構成)<\/span>」に置換する。
これは正規表現の否定先読み(Negative lookahead)を利用すると実現可能。
const test = function(word){
console.log("word = " + word);
const regexp = new RegExp("" + word + "(?!>|r>)", "gi");
const replacerFunction = function(t) {
return "<span class='abc'>" + t + "<\/span>";
};
const keyword =["lower","scrub","travel","bring","branch","brain","embrance"];
console.log("keyword = " + keyword);
return keyword.join("\n<br>").replace(regexp, replacerFunction);
}
console.log(test("lower"));
console.log("----------");
console.log(test("br"));
console.log("----------");
console.log(test("b"));
console.log("----------");
console.log(test("r"));
console.log("----------");
console.log(test("n"));
console.log("----------");
console.log(test("\n"));
console.log("----------");
/*
word = lower
keyword = lower,scrub,travel,bring,branch,brain,embrance
<span class='abc'>lower</span>
<br>scrub
<br>travel
<br>bring
<br>branch
<br>brain
<br>embrance
----------
word = br
keyword = lower,scrub,travel,bring,branch,brain,embrance
lower
<br>scrub
<br>travel
<br><span class='abc'>br</span>ing
<br><span class='abc'>br</span>anch
<br><span class='abc'>br</span>ain
<br>em<span class='abc'>br</span>ance
----------
word = b
keyword = lower,scrub,travel,bring,branch,brain,embrance
lower
<br>scru<span class='abc'>b</span>
<br>travel
<br><span class='abc'>b</span>ring
<br><span class='abc'>b</span>ranch
<br><span class='abc'>b</span>rain
<br>em<span class='abc'>b</span>rance
----------
word = r
keyword = lower,scrub,travel,bring,branch,brain,embrance
lowe<span class='abc'>r</span>
<br>sc<span class='abc'>r</span>ub
<br>t<span class='abc'>r</span>avel
<br>b<span class='abc'>r</span>ing
<br>b<span class='abc'>r</span>anch
<br>b<span class='abc'>r</span>ain
<br>emb<span class='abc'>r</span>ance
----------
word = n
keyword = lower,scrub,travel,bring,branch,brain,embrance
lower
<br>scrub
<br>travel
<br>bri<span class='abc'>n</span>g
<br>bra<span class='abc'>n</span>ch
<br>brai<span class='abc'>n</span>
<br>embra<span class='abc'>n</span>ce
----------
word =
keyword = lower,scrub,travel,bring,branch,brain,embrance
lower<span class='abc'>
</span><br>scrub<span class='abc'>
</span><br>travel<span class='abc'>
</span><br>bring<span class='abc'>
</span><br>branch<span class='abc'>
</span><br>brain<span class='abc'>
</span><br>embrance
----------
*/
この正規表現により、次のように「文字列の中の変数wordに一致する箇所だけを赤字に変える。」ということができる。その際に\n、<br>にはwordが一致しても文字列置換されない。
このコードは「正規表現の否定先読み(Negative lookahead)」の良いサンプルと思う。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>正規表現の否定先読み</title>
<style type="text/css">
</style>
</head>
<body>
<h3>正規表現の否定先読み</h3>
<span id="s01"></span>
<script type="text/javascript" src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(function() {
const test = function(word){
console.log("word = " + word);
const regexp = new RegExp("" + word + "(?!>|r>)", "gi");
const replacerFunction = function(t) {
return "<font color='red'>" + t + "<\/font>";
};
const keyword =["lower","scrub","travel","bring","branch","brain","embrance"];
console.log("keyword = " + keyword);
return keyword.join("\n<br>").replace(regexp, replacerFunction);
}
const result =[]
result.push(test("lower"));
result.push("----------");
result.push(test("br"));
result.push("----------");
result.push(test("b"));
result.push("----------");
result.push(test("r"));
result.push("----------");
result.push(test("n"));
result.push("----------");
result.push(test("\n"));
result.push("----------");
$("#s01").html(result.join("\n<br>"));
});
</script>
</body>
</html>
