正則表達式捕獲組為大寫

Question

如果我使用此代碼使單詞變為粗體，如何將它們也變為大寫？

var vow = "Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the shield that guards the realms of men. I pledge my life and honor to the Night's Watch, for this night and all the nights to come.";

var wordsToBold=["night","watcher"];

function makeBold(input, wordsToBold) {
return input.replace(new RegExp('(\\b)(' + wordsToBold.join('|') + ')(\\b)','ig'), '$1<b>$2</b>$3');
}

document.getElementById("vow_p").innerHTML = makeBold(vow, wordsToBold);

Answer 1

一種方法是使用CSS在#vow_p元素內設置<b>元素的#vow_p ：

 var vow = "Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the shield that guards the realms of men. I pledge my life and honor to the Night's Watch, for this night and all the nights to come."; var wordsToBold=["night","watcher"]; function makeBold(input, wordsToBold) { return input.replace(new RegExp('(\\\\b)(' + wordsToBold.join('|') + ')(\\\\b)','ig'), '$1<b>$2</b>$3'); } document.getElementById("vow_p").innerHTML = makeBold(vow, wordsToBold); 

 #vow_p b { font-weight: bold; text-transform: uppercase; } 

 <p id="vow_p"></p> 

另外，您可以使用replace()方法的匿名函數將匹配字符串轉換為大寫格式：

 var vow = "Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the shield that guards the realms of men. I pledge my life and honor to the Night's Watch, for this night and all the nights to come."; var wordsToBold = ["night", "watcher"]; function makeBold(input, wordsToBold) { return input.replace(new RegExp('(\\\\b)(' + wordsToBold.join('|') + ')(\\\\b)', 'ig'), function(match) { // match, the first argument to the function, is the matched // string which we make uppercase, using // String.prototype.toUpperCase(), and return as the replacement // string concatenated with the html for wrapping that string // in a <b> element: return '<b>' + match.toUpperCase() + '</b>'; }); } document.getElementById("vow_p").innerHTML = makeBold(vow, wordsToBold); 

 <p id="vow_p"></p> 

此外，值得注意的是，您要的是表象性的更改，而不是語義上的更改。 在這種情況下，這應該是CSS的范圍，而不是JavaScript。

因為不需要特定的語義來使這些特定的單詞變強（ <strong>或<b> ），所以它們可以由非語義的<span>元素輕松而准確地表示，並帶有一個類名來應用陳述要求：

 var vow = "Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the shield that guards the realms of men. I pledge my life and honor to the Night's Watch, for this night and all the nights to come."; var wordsToBold = ["night", "watcher"]; function makeBold(input, wordsToBold) { return input.replace(new RegExp('(\\\\b)(' + wordsToBold.join('|') + ')(\\\\b)', 'ig'), '$1<span class="keyWords">$2</span>$3'); } document.getElementById("vow_p").innerHTML = makeBold(vow, wordsToBold); 

 span.keyWords { font-weight: bold; text-transform: uppercase; } 

 <p id="vow_p"></p> 

Answer 2

您只需提供回調即可執行復雜的操作：

function makeBoldAndUpper(input, wordsToBold) {
    return input.replace(
        new RegExp('\\b(' + wordsToBold.join('|') + ')  \\b','ig'),
        function(match, capture) { return "<b>"+match.toUpperCase()+"</b>"; });
}

Answer 3

實際上，您可以通過連接所有單詞來構建正則表達式：

(\b)(night|watch)(\b)

此正則表達式將查找與要求加粗的任何單詞匹配的所有有界單詞。

我添加了一個映射函數來轉換每個單詞表達式以支持復數形式和所有格名詞。

 var vow = "Night gathers, and now my watch begins. It shall not end until my death. I shall take no wife, hold no lands, father no children. I shall wear no crowns and win no glory. I shall live and die at my post. I am the sword in the darkness. I am the watcher on the walls. I am the shield that guards the realms of men. I pledge my life and honor to the Night's Watch, for this night and all the nights to come."; document.body.innerHTML = makeBold(vow, ['night', 'watcher'], 'bold'); function makeBold(passage, words, className) { return passage.replace( new RegExp('(\\\\b)(' + words.map(function(word) { return word + '[\\'s]*'; // Capture (most) plurals and possessive nouns. }).join('|') + ')(\\\\b)', 'ig'), '$1<span class="' + className + '">$2</span>$3'); } 

 .bold { font-weight: bold; text-transform: uppercase; }