javascript 教程" /> 标签前两个单词的字体大小：javascript 教程" />
本文将介绍如何使用 JavaScript 获取 <p> 标签中的前两个单词，并修改它们的字体大小。通过提取 <p> 标签的文本内容，将其分割成单词数组，然后选取前两个单词进行样式修改，从而实现对特定文本的精准控制。文章将提供详细的代码示例和步骤说明，帮助开发者轻松掌握这一技巧。
使用 JavaScript 修改 <p> 标签前两个单词的字体大小
本教程将指导您如何使用 JavaScript 改变 <p> 标签中前两个单词的字体大小。核心思路是：首先获取 <p> 标签的引用，然后提取其文本内容，将文本分割成单词数组，最后选取前两个单词，并将它们包裹在 <span> 标签中，并设置相应的样式。
步骤 1：获取 <p> 标签的引用
首先，需要使用 document.querySelector() 方法获取 <p> 标签的引用。假设您的 HTML 代码如下：
立即学习“Java免费学习笔记（深入）”；
<p>My name is muhammad hamd</p>
对应的 JavaScript 代码如下：
const p = document.querySelector("p");步骤 2：提取文本内容并分割成单词数组
接下来，使用 textContent 属性获取 <p> 标签的文本内容，并使用 split() 方法按照空格将文本分割成单词数组。
let text = p.textContent; let words = text.split(/\s+/g);
在这里，/\s+/g 是一个正则表达式，用于匹配一个或多个空格。g 标志确保匹配整个字符串。
步骤 3：选取前两个单词并修改样式
现在，您可以选取数组中的前两个单词，并将它们包裹在 <span> 标签中，并设置 font-size 样式。为了方便操作，我们将创建一个函数来实现这个功能。
function highlightFirstTwoWords(paragraph, fontSize) {
let text = paragraph.textContent;
let words = text.split(/\s+/g);
if (words.length >= 2) {
let firstTwoWords = words.slice(0, 2).join(" ");
let remainingWords = words.slice(2).join(" ");
paragraph.innerHTML = `<span style="font-size: ${fontSize};">${firstTwoWords}</span> ${remainingWords}`;
} else {
// 如果单词数量少于两个，则直接设置整个段落的样式
paragraph.style.fontSize = fontSize;
}
}步骤 4：调用函数
最后，调用 highlightFirstTwoWords() 函数，并传入 <p> 标签的引用和所需的字体大小。
const p = document.querySelector("p");
highlightFirstTwoWords(p, "24px");完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>修改段落前两个单词的字体大小</title>
</head>
<body>
<p>My name is muhammad hamd</p>
<script>
function highlightFirstTwoWords(paragraph, fontSize) {
let text = paragraph.textContent;
let words = text.split(/\s+/g);
if (words.length >= 2) {
let firstTwoWords = words.slice(0, 2).join(" ");
let remainingWords = words.slice(2).join(" ");
paragraph.innerHTML = `<span style="font-size: ${fontSize};">${firstTwoWords}</span> ${remainingWords}`;
} else {
// 如果单词数量少于两个，则直接设置整个段落的样式
paragraph.style.fontSize = fontSize;
}
}
const p = document.querySelector("p");
highlightFirstTwoWords(p, "24px");
</script>
</body>
</html>注意事项：
- 该方法修改了 <p> 标签的 innerHTML，因此会移除原有的事件监听器或其他动态内容。
- 如果需要更复杂的样式控制，可以考虑使用 CSS 类名来代替内联样式。
总结：
本教程演示了如何使用 JavaScript 修改 <p> 标签中前两个单词的字体大小。通过获取文本内容，分割成单词数组，并使用 <span> 标签包裹前两个单词，您可以轻松地实现对特定文本的样式控制。该方法可以灵活应用于各种场景，例如突出显示文章的开头部分或实现更复杂的文本效果。
