用ChatGPT做文本处理工具——去除链接工具
原创
由于我需要将一段文本中的链接全部清理掉，网上并没有找到相应的工具，还不如自己做一个。
提问：做一个html能够自动去除输入文本中的所有链接。
ChatGPT给到的答案是一个英文前端的页面，并没有对页面进行优化，也没有实现我所要的功能，我想加入js应该是没问题吧，结果还是没用！
<!DOCTYPE html>
<html>
<head>
<title>去除链接示例</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function removeLinks() {
// 获取输入文本框的值
var inputText = document.getElementById("inputText").value;
// 使用正则表达式匹配所有的链接
var regex = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/gi;
var processedText = inputText.replace(regex, "");
// 显示处理后的文本
document.getElementById("outputText").innerHTML = processedText;
// 将处理后的文本复制到剪贴板
var tempInput = document.createElement("textarea");
tempInput.value = processedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
</head>
<body>
<h1>去除链接示例</h1>
<textarea id="inputText" rows="5" cols="50"></textarea><br>
<button onclick="removeLinks()">去除链接</button><br>
<div id="outputText"></div>
<button onclick="copyResult()">复制结果</button>
<script>
function copyResult() {
// 获取处理后的文本
var processedText = document.getElementById("outputText").innerHTML;
// 将处理后的文本复制到剪贴板
var tempInput = document.createElement("textarea");
tempInput.value = processedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
</body>
</html>几轮提问后，我发现了问题所在：
// 使用正则表达式匹配所有的链接
var regex = /<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/gi;
var processedText = inputText.replace(regex, "");其中，我们处理的是A标签的链接，而不是文本链接，这里就是问题所在了，说明我们在提问的时候没有说明清楚，处理的是代码中的链接还是文中的链接。
所以我提问：
// 使用正则表达式匹配所有的链接
var regex = /<a\b[^>]*>(.*?)<\/a>/gi;
var processedText = inputText.replace(regex, "");这个地方匹配的是A标签，而不是文本链接，如输入百度https://www.baidu.com/得到的结果还是“百度https://www.baidu.com/”而不是“百度”得到的结果就没问题了：
<!DOCTYPE html>
<html>
<head>
<title>去除链接示例</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function removeLinks() {
// 获取输入文本框的值
var inputText = document.getElementById("inputText").value;
// 使用正则表达式匹配所有的链接
var regex = /(https?:\/\/[^\s]+)/gi;
var processedText = inputText.replace(regex, "");
// 显示处理后的文本
document.getElementById("outputText").innerHTML = processedText;
// 将处理后的文本复制到剪贴板
var tempInput = document.createElement("textarea");
tempInput.value = processedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
</head>
<body>
<h1>去除链接示例</h1>
<textarea id="inputText" rows="5" cols="50"></textarea><br>
<button onclick="removeLinks()">去除链接</button><br>
<div id="outputText"></div>
<button onclick="copyResult()">复制结果</button>
<script>
function copyResult() {
// 获取处理后的文本
var processedText = document.getElementById("outputText").innerHTML;
// 将处理后的文本复制到剪贴板
var tempInput = document.createElement("textarea");
tempInput.value = processedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
</body>
</html>
强迫症犯了，觉得这个页面真的难看，就直接用bootstrap优化一下这个页面，当然我们也可以用layui优化。
注：以后我们所有的前端基本都是使用bootstrap或者layui优化，希望大家能够记住这俩前端样式库。
结果就是：
我发现这个界面第一没有适配屏幕大小，又没有隐藏复制结果这个按钮，导致不管是否有结果都会有“复制结果”按钮出现，所以我继续提问：
适配屏幕我直接用的已知代码：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">所以综合ChatGPT给的答案就是：
<!DOCTYPE html>
<html>
<head>
<title>去除文本中的链接</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function removeLinks() {
// 获取输入文本框的值
var inputText = document.getElementById("inputText").value;
// 使用正则表达式匹配所有的链接
var regex = /(https?:\/\/[^\s]+)/gi;
var processedText = inputText.replace(regex, "");
// 显示处理后的文本
var outputCard = document.getElementById("outputCard");
if (processedText.trim() !== "") {
outputCard.style.display = "block";
outputText.textContent = processedText;
} else {
outputCard.style.display = "none";
}
// 显示或隐藏复制结果按钮
var copyButton = document.getElementById("copyButton");
if (processedText.trim() !== "") {
copyButton.style.display = "block";
} else {
copyButton.style.display = "none";
}
}
</script>
</head>
<body>
<div class="container">
<h2 class="mt-5 mb-3 text-muted">去除文本中的链接</h2>
<div class="mb-3">
<textarea id="inputText" rows="5" class="form-control"></textarea>
</div>
<div class="mb-3">
<button onclick="removeLinks()" class="btn btn-primary">去除链接</button>
</div>
<div id="outputCard" class="card mb-3" style="display: none;">
<div class="card-body">
<p class="card-title">文本预览</p><hr>
<p id="outputText" style="white-space: pre-line;"></p>
</div>
</div>
<button onclick="copyResult()" id="copyButton" class="btn btn-secondary" style="display: none;">复制结果</button>
</div>
<script>
function copyResult() {
// 获取处理后的文本
var processedText = document.getElementById("outputText").textContent;
// 将处理后的文本复制到剪贴板
var tempInput = document.createElement("textarea");
tempInput.value = processedText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
</script>
</body>
</html>以上代码可以直接保存到html文件中访问使用！
演示截图：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读