Regex Capture Groups to Upper Case

Question

If I'm using this code to make words bold how do I go about also making them uppercase?

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

One approach is to use CSS to style the <b> elements within the #vow_p element:

 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> 

Alternatively, you can use the replace() method's anonymous function to convert the matched-string to upper-case format:

 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> 

Further it's worth noting that what you're asking for is presentational, rather than semantic, change; in which case this should be the purview of CSS rather than JavaScript.

Because there's no specific semantic need for those particular words to be strong ( <strong> , or <b> ), they would be as easily and accurately represented by a non-semantic <span> element, with a class-name to apply the presentational requirements:

 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

You can simply provide a callback to do complex operations:

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

Answer 3

You can essentially build a regular expression by joining all the words as such:

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

This regular expression will find all bounded-words that match any of the words requested to be bolded.

I added a mapping function to transform each word expression to support plurals and possessive nouns.

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