Javascript修改第一个单词

Question

肯定有更好的方法来做到这一点吗?它不是很优雅。我只是想让第一个单词变粗。

let title_array = title.split(" ");
title_array[0] = "<strong>"+title_array[0]+"</strong>";
title = title_array.join(" ");

Answer 1

你的方法很好，下面是使用Regex的另一种方法

var title = "Hello to new StackOverflow";
title = title.replace(/^(w+)/, '<strong>$1</strong>');
console.log(title);

var title = "Hello to new StackOverflow";
title = title.replace(/^(w+)/, '<strong>$1</strong>');
console.log(title);

由于你使用的是React，你可能不得不使用dangerouslySetInnerHTML来渲染html。

所以React中的另一种方法是这样的。

<div>
{
title.split(" ").map((word, index) => {
return index === 0 ? <strong>{word}</strong> : ` ${word}`;
});
}
</div>

Answer 2

我认为你现在的方法很好。您也可以选择使用.replace()与正则表达式:

const title = "This is a title";
const boldTitle = title.replace(/^[^s]+/, "<strong>$&</strong>");
console.log(boldTitle);
document.body.innerHTML = boldTitle;

在这里，正则表达式从字符串的开头(^)匹配非空白字符([^s]+)，直到到达空白字符(s)。然后在替换(使用$&引用)

中使用此匹配。

Answer 3

我会使用CSS类。解构赋值可以帮助定义单词，并且可以使用模板字符串返回结果。

function embolden(str) {
const [ first, ...rest ] = str.split(' ');
return `<span class="bold">${first}</span> ${rest.join(' ')}`;
}
const title = 'Javascript Modify First Word';
document.body.innerHTML = embolden(title);

.bold { font-weight: 700; }

Answer 4

为了简化编码，请使用箭头函数结合RegEx使其更短。

const boldFirstWord = strTitle => strTitle.replace(/(^|.s)([a-z]+)/gi, "$1<strong>$2</strong>");
console.log(boldFirstWord("We simply love JavaScript!!!"));

Answer 5

我认为你所提出的是好的，但我不认为你应该使用<strong>，也许这将是一个更好的方法取决于情况:

let title_array = title.split(" ");
title_array[0] = `<span style="font-weight: 700">${title_array[0]}</span>`;
title = `<p>${title_array.join(" ")}</p>`;