js+css实现抖音直播违禁词敏感词文本文案监测与替换工具代码
代码语言：html
所属分类：其他
代码描述：js+css实现抖音直播违禁词敏感词文本文案监测与替换工具代码
代码标签： js css 抖音 直播 违禁词 敏感词 文本 文案 监测 替换 工具 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抖音直播违禁词检测与替换工具</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script>
// Tailwind配置
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
danger: '#EF4444',
warning: '#F59E0B',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
boxShadow: {
'custom': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)',
'hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
}
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.transition-custom {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen font-inter text-dark">
<!-- 顶部导航 -->
<header class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-shield text-primary text-2xl"></i>
<h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-dark">
违禁词检测与替换工具
</h1>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-slate-100 transition-custom">
<i class="fa fa-moon-o text-slate-600"></i>
</button>
<button id="help-btn" class="p-2 rounded-full hover:bg-slate-100 transition-custom">
<i class="fa fa-question-circle text-slate-600"></i>
</button>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
<!-- 介绍卡片 -->
<div class="bg-white rounded-xl shadow-custom p-6 mb-8 transform hover:shadow-hover transition-custom">
<div class="flex flex-col md:flex-row items-start md:items-center gap-4">
<div class="bg-primary/10 p-3 rounded-lg">
<i class="fa fa-info-circle text-primary text-xl"></i>
</div>
<div>
<h2 class="text-xl font-semibold mb-2">工具介绍</h2>
<p class="text-slate-600">
本工具可帮助您检测文本中的违禁词并自动替换为合适的替代词（替换词中"/"表示可选替换项），适用于内容审核、社交媒体发布等场景。
</p>
</div>
</div>
</div>
<!-- 功能区 -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<!-- 输入区域 -->
<div class="bg-white rounded-xl shadow-custom overflow-hidden transform hover:shadow-hover transition-custom">
<div class="bg-primary/10 px-6 py-4 border-b border-slate-100">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-pencil-square-o mr-2 text-primary"></i>
输入文本
</h3>
</div>
<div class="p-6">
<textarea
id="input-text"
class="w-full h-64 p-4 border border-slate-200 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none resize-none transition-custom"
placeholder="请在此输入需要检测的文本内容..."
></textarea>
<div class="flex flex-wrap gap-3 mt-4">
<button id="check-btn" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 flex items-center transition-custom shadow-md hover:shadow-lg">
<i class="fa fa-search mr-2"></i>检测并替换
</button>
<button id="clear-input-btn" class="px-4 py-2.5 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 flex items-center transition-custom">
<i class="fa fa-trash-o mr-2"></i>清空
</button>
<button id="sample-btn" class="px-4 py-2.5 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 flex items-center transition-custom">
<i class="fa fa-file-text-o mr-2"></i>示例文本
</button>
</div>
</div>
</div>
<!-- 结果区域 -->
<div class="bg-white rounded-xl shadow-custom overflow-hidden transform hover:shadow-hover transition-custom">
<div class="bg-secondary/10 px-6 py-4 border-b border-slate-100">
<h3 class="font-semibold text-lg flex items-center">
<i class="fa fa-check-circle mr-2 text-secondary"></i>
处理结果
</h3>
</div>
<div class="p-6">
<div id="result-container" class="w-full h-64 p-4 border border-slate-200 rounded-lg bg-slate-50 overflow-auto scrollbar-hide">
<div class="text-slate-400 flex items-center justify-center h-full">
<i class="fa fa-arrow-left mr-2"></i>请输入文本并点击检测按钮
</div>
</div>
<div class="flex flex-wrap gap-3 mt-4">
<button id="copy-result-btn" class="px-4 py-2.5 bg-secondary text-white rounded-lg hover:bg-secondary/90 flex items-center transition-custom shadow-md hover:shadow-lg" disabled>
<i class="fa fa-copy mr-2"></i>复制结果
</button>
<button id="download-result-btn" class="px-4 py-2.5 bg-slate-200 text-slate-700 rounded-lg hover:bg-slate-300 flex items-center transition-custom" disabled>
<i class="fa fa-download mr-2"></i>下载结果
</button>
</div>
</div>
</div>
</div>
<!-- 统计和设置区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- 统计信息 -->
<div class="bg-white rounded-xl shadow-custom p-6 transform hover:shadow-hover transition-custom">
<h3 class="font-semibold text-lg mb-4 flex items-center">
<i class="fa fa-bar-chart mr-2 text-warning"></i>
检测统计
</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-slate-50 p-4 rounded-lg">
<p class="text-sm text-slate-500">检测到的违禁词</p>
<p id="word-count" class="text-2xl font-bold text-danger mt-1">0</p>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<p class="text-sm text-slate-500">替换次数</p>
<p id="replace-count" class="text-2xl font-bold text-secondary mt-1">0</p>
</div>
</div>
<div id="detected-words" class="mt-4 hidden">
<p class="text-sm text-slate-500 mb-2">检测到的词语：</p>
<div id="words-list" class="flex flex-wrap gap-2"></div>
</div>
</div>
<!-- 替换设置 -->
<div class=".........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0