使用JavaScript改变HTML 标签前两个单词的样式

// 假设HTML中有一个id为"myParagraph"的p标签
// <p id="myParagraph">My name is muhammad hamd</p>

// 1. 获取目标p元素
const pElement = document.querySelector("#myParagraph"); 

// 2. 获取p元素的纯文本内容
// textContent 会获取元素及其所有子元素的文本内容，不包含HTML标签
let fullText = pElement.textContent;

console.log("原始文本内容:", fullText); 
// 输出: 原始文本内容: My name is muhammad hamd

// 承接上一步的代码

// 3. 使用正则表达式将文本分割成单词数组
// /\s+/g 是一个正则表达式：
//   \s 匹配任何空白字符（包括空格、制表符、换行符等）
//   +  表示匹配一个或多个空白字符
//   g  表示全局匹配，即匹配所有符合条件的空白字符，而不仅仅是第一个
let words = fullText.split(/\s+/g);

console.log("分割后的单词数组:", words);
// 输出: 分割后的单词数组: ["My", "name", "is", "muhammad", "hamd"]

// 4. 提取前两个单词
const firstWord = words[0];
const secondWord = words[1];

console.log("第一个单词:", firstWord);  // 输出: 第一个单词: My
console.log("第二个单词:", secondWord); // 输出: 第二个单词: name

// 完整的HTML结构示例
/*
<p id="myParagraph">My name is muhammad hamd</p>
*/

// 1. 获取目标p元素
const pElement = document.querySelector("#myParagraph"); 
let fullText = pElement.textContent;
let words = fullText.split(/\s+/g);

// 2. 检查是否有足够的单词
if (words.length >= 2) {
    const firstWord = words[0];
    const secondWord = words[1];

    // 3. 创建带有样式的<span>标签来包裹前两个单词
    // 这里我们直接使用内联样式，但在实际项目中更推荐使用CSS类
    const styledFirstWord = `<span style="font-size: 1.5em; font-weight: bold;">${firstWord}</span>`;
    const styledSecondWord = `<span style="font-size: 1.5em; font-weight: bold;">${secondWord}</span>`;

    // 4. 重构新的HTML内容
    // 将前两个单词替换为带样式的<span>标签，并重新组合剩余的单词
    let newContent = [styledFirstWord, styledSecondWord, ...words.slice(2)].join(' ');

    // 5. 更新p元素的innerHTML
    // innerHTML会解析并渲染新的HTML字符串
    pElement.innerHTML = newContent;

    console.log("更新后的HTML内容:", pElement.innerHTML);
    // 预期输出: <span style="font-size: 1.5em; font-weight: bold;">My</span> <span style="font-size: 1.5em; font-weight: bold;">name</span> is muhammad hamd
} else {
    console.warn("段落中的单词不足两个，无法应用样式。");
}