[英]Regex Capture Groups to Upper Case
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);
One approach is to use CSS to style the <b>
elements within the #vow_p
element: 一种方法是使用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>
Alternatively, you can use the replace()
method's anonymous function to convert the matched-string to upper-case format: 另外,您可以使用
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>
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.
在这种情况下,这应该是CSS的范围,而不是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: 因为不需要特定的语义来使这些特定的单词变强(
<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>
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>"; });
}
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.