<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人博客生成器</title>
<style>
/* 页面基础样式 */
body {
font-family: &#
39;Microsoft YaHei&#
39;, Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
/* 容器样式 - 左右布局 */
.container {
display: flex;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* 输入区域样式 */
.input-area, .output-area {
flex: 1;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba
(0,0,0,0.1
);
}
/* 文本区域样式 */
textarea {
width: 100%;
height:
300px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
line-height: 1.5;
resize: vertical;
box-sizing: border-box;
}
/* 提交按钮样式 */
input[type="submit"] {
background-color: #0077cc;
color: white;
padding: 12px
30px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.
3s;
}
input[type="submit"]:hover {
background-color: #005fa
3;
}
/* 预览iframe样式 */
iframe {
width: 100%;
height: 400px;
border: 1px solid #ccc;
border-radius: 4px;
background: white;
}
/* 标签样式 */
.tag {
display: inline-block;
background-color: #e0e0e0;
color: #555;
padding: 4px 12px;
margin: 2px;
border-radius: 15px;
font-size: 0.8em;
text-decoration: none;
}
.tag:hover {
background-color: #d0d0d0;
}
/* 详情展开样式 */
details {
margin-top: 20px;
background: #f9f9f9;
padding: 15px;
border-radius: 4px;
}
summary {
cursor: pointer;
font-weight: bold;
color: #0077cc;
}
pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
font-size: 12px;
}
h1 {
text-align: center;
color: #
333;
margin-bottom:
30px;
}
h
3 {
color: #555;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>🎨 我的个人博客生成器</h1>
<div class="container">
<!-- 左侧输入区 -->
<div class="input-area">
<form method="POST">
<h
3>📝 请输入你的博客
内容：</h
3>
<textarea name="blog_content" placeholder="在这里写下你的博客
内容...例如：
今天发现了一个很棒的学习网站，https://www.php.net，这里有最权威的PHP文档。
还找到了一个不错的编程社区：https://stackoverflow.com
在这里可以找到各种编程问题的答案。
#PHP #编程学习 #Web开发
今天学习了字符串处理和正则表达式，感觉对文本处理有了新的认识。函数封装让代码更加模块化，易于维护。
期待后续学习更多有趣的知识！"><?php
// 在文本区域中显示之
前提交的
内容，使用htmlspecialchars防止XSS攻击
if
(isset
($_POST[&#
39;blog_content&#
39;]
)) {
echo htmlspecialchars
($_POST[&#
39;blog_content&#
39;]
);
}
?></textarea>
<br><br>
<input type="submit" value="🚀 生成博客！">
</form>
</div>
<!-- 右侧输出区 -->
<div class="output-area">
<h
3>👀 生成的博客预览：</h
3>
<?php
/**
* 任务1：将文本中的URL地址转换为可点击的HTML链接
* @param string $text 原始文本
* @return string 处理后的文本（包含HTML链接）
*/
function makeClickableLinks
($text
) {
// 使用正则表达式
匹配以http://或https://开头的URL
// 正则表达式说明：/
(https?:\/\/[^\s]+
)/
// - `https?`：
匹配 http 或 https（s?表示s出现0次或1次）
// - `:\/\/`：
匹配 ://
// - `[^\s]+`：
匹配一个或多个非空格的字符
$pattern = &#
39;/
(https?:\/\/[^\s]+
)/&#
39;;
// 替换模式：将
匹配到的URL用<a>标签包裹起来
// `$1` 是对正则中第一个括号内
匹配到的
内容的引用，即完整的URL
$replacement = &#
39;<a href="$1" target="_blank" style="color: #0077cc; text-decoration: none;">$1</a>&#
39;;
// 使用preg_replace函数执行正则替换
return preg_replace
($pattern, $replacement, $text
);
}
/**
* 任务2：将文本中的标签（如#PHP）格式化为带样式的Span元素
* @param string $text 原始文本
* @return string 处理后的文本（包含格式化后的标签）
*/
function formatHashtags
($text
) {
// 使用正则表达式
匹配以#开头、后跟一个或多个字母/数字/下划线的标签
// 正则表达式说明：/#
(\w+
)/
// - `#`：
匹配字符#
// - `\w+`：
匹配一个或多个字母、数字或下划线
$pattern = &#
39;/#
(\w+
)/&#
39;;
// 替换模式：将
匹配到的标签用<span>标签包裹，并添加一个CSS类`tag`
// `$1` 是对正则中第一个括号内
匹配到的
内容的引用，即`#`后面的文字（如PHP）
$replacement = &#
39;<span class="tag">#$1</span>&#
39;;
// 使用preg_replace函数执行正则替换
return preg_replace
($pattern, $replacement, $text
);
}
/**
* 任务
3：将处理好的博客
内容包装成一个完整的HTML页面
* @param string $content 已经过URL和标签处理的博客正文
* @return string 完整的HTML页面代码
*/
function wrapBlogContent
($content
) {
// 使用date函数获取当
前日期，并格式化为"年-月-日"的形式
$currentDate = date
("Y年m月d日"
);
// 使用nowdoc语法定义一个多行字符串，用于构建完整的HTML
// 这种语法非常适合编写大段的、内嵌HTML的字符串
$html = <<<&#
39;HTML&#
39;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的生成博客</title>
<style>
body {
font-family: &#
39;Microsoft YaHei&#
39;, sans-serif;
line-height: 1.6;
padding: 40px;
max-width: 800px;
margin: 0 auto;
background: linear-gradient
(1
35deg, #667eea 0%, #764ba2 100%
);
min-height: 100vh;
}
.blog-container {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px
30px rgba
(0,0,0,0.2
);
}
.blog-title {
color: #
333;
border-bottom:
3px solid #667eea;
padding-bottom: 15px;
margin-bottom: 20px;
}
.blog-date {
color: #666;
font-size: 0.9em;
margin-bottom:
30px;
padding: 10px;
background: #f8f9fa;
border-radius: 5px;
}
.blog-content {
margin-top: 20px;
font-size: 16px;
}
.blog-content p {
margin-bottom: 20px;
}
.tag {
display: inline-block;
background: linear-gradient
(1
35deg, #667eea, #764ba2
);
color: white;
padding: 5px 15px;
margin: 5px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
}
a {
color: #667eea;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="blog-container">
<h1 class="blog-title">✍️ 我的博客
随笔</h1>
<p class="blog-date">📅 发布日期：
HTML;
// 拼接日期
$html .= $currentDate . &#
39;</p>&#
39;;
// 拼接
内容
$html .= &#
39;<div class="blog-content">&#
39; . nl2br
($content
) . &#
39;</div>&#
39;;
// 闭合标签
$html .= &#
39;</div></body></html>&#
39;;
// 返回最终生成的完整HTML字符串
return $html;
}
// 检查是否是POST请求并且有博客
内容
if
($_SERVER["REQUEST_METHOD"] == "POST" && !empty
($_POST[&#
39;blog_content&#
39;]
)) {
// 获取原始博客
内容
$originalContent = $_POST[&#
39;blog_content&#
39;];
echo "<h4>✅ 处理流程：</h4>";
echo "<ol>";
echo "<li>原始
内容长度: " . strlen
($originalContent
) . " 字符</li>";
// ！！！核心处理流程！！！
// 步骤1：调用函数，转换URL为链接
$contentWithLinks = makeClickableLinks
($originalContent
);
echo "<li>已识别并转换URL链接</li>";
// 步骤2：调用函数，格式化标签
$formattedContent = formatHashtags
($contentWithLinks
);
echo "<li>已格式化标签</li>";
// 步骤
3：调用函数，将最终
内容包装成完整HTML页面
$finalBlogHTML = wrapBlogContent
($formattedContent
);
echo "<li>已生成完整HTML页面</li>";
echo "</ol>";
// 在预览区域显示生成的博客
echo "<h4>🎯 博客预览：</h4>";
echo "<iframe srcdoc=\"" . htmlspecialchars
($finalBlogHTML
) . "\" title=\"博客预览\"></iframe>";
// 显示生成的HTML源代码，供调试学习
echo "<details>";
echo "<summary>🔍 查看生成的HTML源码</summary>";
echo "<pre>" . htmlspecialchars
($finalBlogHTML
) . "</pre>";
echo "</details>";
} elseif
($_SERVER["REQUEST_METHOD"] == "POST"
) {
// 如果提交了表单但
内容为空
echo "<div style=&#
39;color: #d
32f2f; background: #ffebee; padding: 15px; border-radius: 4px;&#
39;>";
echo "⚠️ 请输入博客
内容后再点击生成按钮！";
echo "</div>";
} else {
// 首次访问页面时的提示
echo "<div style=&#
39;color: #666; text-align: center; padding: 40px;&#
39;>";
echo "<p>👆 请在左侧输入你的博客
内容，然后点击生成按钮</p>";
echo "<p>✨ 系统会自动：</p>";
echo "<ul style=&#
39;text-align: left; display: inline-block;&#
39;>";
echo "<li>将网址转换为可点击链接</li>";
echo "<li>格式化 #标签 为美观样式</li>";
echo "<li>生成完整的博客页面</li>";
echo "</ul>";
echo "</div>";
}
?>
</div>
</div>
</body>
</html>一、基于补充的“个人博客生成器”项目，执行进阶版任务，具体任务要求：
在原来“博客预览”的下方，新增一个“博客
内容分析报告”区域。学生需要编写新的函数，实现以下四个核心统计功能：
统计基础信息：总字符数、总单词数、预计阅读时间。
统计标签数量：识别并统计文章中使用了多少个#标签。
统计链接数量：识别并统计文章中包含了多少个http/https链接。
关键词高亮：让用户输入一个自定义关键词（如“PHP”），并在原文中高亮显示它。
WEB页面样式不限；
二、任务要点：
1、创建统计函数：创建至少
3个新的自定义函数来完成统计。
getBasicStats
($text
): 统计字符数、单词数，并计算阅读时间（假设每分钟阅读200个单词）。
countHashtags
($text
): 使用正则表达式统计并返回所有#标签的数量和列表。
countLinks
($text
): 使用正则表达式统计文本中http/https链接的数量。
2、实现关键词高亮：在左侧表单中新增一个文本输入框，用于让用户输入想要高亮的关键词。
编写一个 highlightKeyword
($text, $keyword
) 函数，使用字符串替换功能，将文中所有的关键词替换为 <mark style="background-color: yellow;">$keyword</mark>。
3、整合与显示：
在生成博客后，调用这些统计函数。
将统计结果以清晰、美观的格式显示在“博客预览”区域下方。
三、关键知识点提示：
字符串函数：strlen
(), str_word_count
(), str_ireplace
()
正则表达式：preg_match_all
() 这是完成统计的关键
匹配步骤。
自定义函数：如何设计函数接收参数并返回结果。
表单处理：如何获取新增的输入框的
值 ($_POST[&#
39;keyword&#
39;]
)。输出修改后的完整代码
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
