<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人博客生成器</title>
<style>
/*
页面基础样式 */
body {
font-family
: 'Microsoft YaHei', 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
: #005fa3;
}
/* 预览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;
}
h3 {
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">
<h3>📝 请输入你的博客
内容：</h3>
<
textarea name="blog_content" placeholder="在这里写下你的博客
内容...例如：
今天发现了一个很棒的学习网站，https
://www.php.net，这里有最权威的PHP文档。
还找到了一个不错的编程社区：https
://stackoverflow.com
在这里可以找到各种编程问题的答案。
#PHP #编程学习 #Web开发
今天学习了字符串处理和正则表达式，感觉对文本处理有了新的认识。函数封装让代码更加模块化，易于维护。
期待后续学习更多有趣的知识！"><?php
// 在文本区域中
显示之前提交的
内容，使用htmlspecialchars防止XSS攻击
if(isset($_POST['blog_content'])) {
echo htmlspecialchars($_POST['blog_content']);
}
?></
textarea>
<br><br>
<input type="submit" value="🚀 生成博客！">
</form>
</div>
<!-- 右侧输出区 -->
<div class="output-area">
<h3>👀 生成的博客预览：</h3>
<?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 = '/(https?
:\/\/[^\s]+)/';
// 替换模式：将匹配到的URL用<a>标签包裹起来
// `$1` 是对正则中第一个括号内匹配到的
内容的引用，即完整的URL
$replacement = '<a href="$1" target="_blank" style="color
: #0077cc; text-decoration
: none;">$1</a>';
// 使用preg_replace函数执行正则替换
return preg_replace($pattern, $replacement, $text);
}
/**
* 任务2：将文本中的标签（如#PHP）格式化为带样式的Span元素
* @param string $text 原始文本
* @return string 处理后的文本（包含格式化后的标签）
*/
function formatHashtags($text) {
// 使用正则表达式匹配以#开头、后跟一个或多个字母/数字/下划线的标签
// 正则表达式说明：/#(\w+)/
// - `#`：匹配字符#
// - `\w+`：匹配一个或多个字母、数字或下划线
$pattern = '/#(\w+)/';
// 替换模式：将匹配到的标签用<span>标签包裹，
并添加一个CSS类`tag`
// `$1` 是对正则中第一个括号内匹配到的
内容的引用，即`#`后面的文字（如PHP）
$replacement = '<span class="tag">#$1</span>';
// 使用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 = <<<'HTML'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的生成博客</title>
<style>
body {
font-family
: 'Microsoft YaHei', sans-serif;
line-height
: 1.6;
padding
: 40px;
max-width
: 800px;
margin
: 0 auto;
background
: linear-gradient(135deg, #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(135deg, #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 . '</p>';
// 拼接
内容
$html .= '<div class="blog-content">' . nl2br($content) . '</div>';
// 闭合标签
$html .= '</div></body></html>';
// 返回最终生成的完整HTML字符串
return $html;
}
// 检查是否是POST请求
并且有博客
内容
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST['blog_content'])) {
// 获取原始博客
内容
$originalContent = $_POST['blog_content'];
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='color
: #d32f2f; background
: #ffebee; padding
: 15px; border-radius
: 4px;'>";
echo "⚠️ 请输入博客
内容后再点击生成按钮！";
echo "</div>";
} else {
// 首次访问
页面时的提示
echo "<div style='color
: #666; text-align
: center; padding
: 40px;'>";
echo "<p>👆 请在左侧输入你的博客
内容，然后点击生成按钮</p>";
echo "<p>✨ 系统会自动：</p>";
echo "<ul style='text-align
: left; display
: inline-block;'>";
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['keyword'])。在不修改代码只增加代码的情况下输出修改后代码
本文介绍了一种解决文本在数据库存储过程中丢失空格和换行的方法。通过使用特定字符替换空格和换行符，可以在显示时正确呈现原始格式。
扫一扫
2867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
