js实现跟内容里面的关键词标高亮_js 一段文字关键字高亮显示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45791806/article/details/143322526
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <p>鲜艳的红领巾深深地印在我心中，它如同烈士的鲜血一般，它激励着我前进，让我奋发向上，我记录着我的童年，我的一切。</p>
        <p>童年时的我天真、活泼、充满激情，想为社国贡献一份力量，便努力的充实自己。</p>
        <p>我如同羽毛渐翼的雏鹰，想要尝试飞翔的滋味；我如同崭新的帆船，想感受乘风破浪的感觉；我如同胜利者，想要赢得他人的肯定。</p>
        <p>就算是鲜艳的花儿，也会经历挫折；就算是参天大树，也会有失望的时候。我也如此，在这条道路上，我失望过，想要放弃。</p>
        <p>有一次，我真的绝望了。独自走在大街上，我似乎觉得天是那么黑，连小鸟也不肯定我的做法。我简直想躺在妈妈的怀里嚎嚎大哭。可是我没有哭，因为我看到了一群“红领巾”，他们帮助的人，真心诚意为人民服务。他们遇到过再大的挫折，但是他们都坚台的挺过来，不屈服、不放弃。而我呢，也是一位“红领巾”，我却不能像他们那样坚强，因一时挫折而承受不住，想要放弃。这是我一向的作风吗？我迟疑，当初我满怀激情想要做出一点成就，而今我却要放弃。我不甘心，我不能屈服，我要向那一群“红领巾”学习，无论遇到多大挫折，我都要坚持下去。正应如此，我克服了心理的重重障碍，用另一种角度去对待事情，用满腔热血重新去实现当初的愿望。
        </p>
        <p>正因有信念，我就像初开的花儿一般，想把自己的芬芳传给他人；我就像安升的朝阳，想把自己的光辉传播给每个人；我就像成功者一样，想要与人分享收获。</p>
        <p>我不会再轻言放弃。因为我每时每刻都是一位“红领巾”，红领巾永远飘在我面前，它是推动我前进的动力。它是我的知心朋友，与我同分享我的喜怒哀乐，无怨无悔。</p>
        <p>就这样，我欢度六年小学。这六年，我过得充实快乐。因为有红领巾的陪伴，我不会孤独，也不会寂寞。六年后，我离开亲爱的小学，进入初中，虽然我的胸前不曾戴有红领巾，但是红领巾早已在我心中，因为我永远认为我是一名“红领巾”，我应以一名“红领巾”的身份去履行我应尽的义务。
        </p>
        <p>红领巾在它心中装着一个女孩梦想，红领巾永远为她默默加油红领巾永远是她的依靠。我深信如此，因为我是一名“红领巾”。</p>
    </div>
</body>
<script>
    const title = '红领巾';
    // 获取所有包含正文内容的元素
    const contentElements = document.querySelectorAll('.content');
    // 遍历所有匹配的正文元素
    contentElements.forEach(contentElement => {
        let content = contentElement.innerHTML;

        // 使用正则表达式匹配标题名称并修改样式
        const regex = new RegExp(title, 'g');
        content = content.replace(regex, `<span style="color: red; font-weight: bold;">${title}</span>`);

        // 将修改后的内容放回正文中
        contentElement.innerHTML = content;
    });
    const newsCenterParagraphs = document.querySelectorAll('.content p');
    // 遍历每个 <p> 标签
    newsCenterParagraphs.forEach(p => {
        const text = p.innerHTML;
        // 判断是否以数字和顿号 "、" 开头
        const startsWithNumberAndDot = /^\d+、/.test(text);
        // 如果包含 "：" 符号
        if (text.includes('：')) {
            // 将 '：' 前后的文本分开
            const parts = text.split('：');
            const beforeColon = parts[0];  // 冒号前的部分
            const afterColon = parts[1];   // 冒号后的部分

            // 如果以数字和顿号开头
            if (startsWithNumberAndDot) {
                // 提取数字和顿号部分
                const prefixMatch = text.match(/^\d+、/);
                const prefix = prefixMatch ? prefixMatch[0] : ''; // 匹配到的 "数字+ 、"

                // 将数字和顿号保留，并将其后面的部分用 <span> 包裹
                const newContent = `${prefix}<span class="red-text">${beforeColon.replace(prefix, '')}</span>：${afterColon}`;

                // 更新 <p> 标签的内容
                p.innerHTML = newContent;
            } else {
                // 如果没有数字和顿号，则正常处理
                const newContent = `<span class="red-text">${beforeColon}</span>：${afterColon}`;
                p.innerHTML = newContent;
            }
        }
    });
</script>

</html>