仿照锤子的大爆炸，使用本地分词逻辑对选中文本进行分词
当前为
// ==UserScript==
// @name 文本大爆炸
// @namespace http://tampermonkey.net/
// @author 突徒土兔
// @version 1
// @description 仿照锤子的大爆炸，使用本地分词逻辑对选中文本进行分词
// @match *://*/*
// @icon https://s2.loli.net/2024/09/25/6PxlMHA7EZVqwsJ.png
// ==/UserScript==
(function () {
"use strict";
let button = null;
let popupContainer = null;
/**
* 创建样式
* 该函数用于创建并插入样式表，定义按钮和弹出窗口的样式。
*/
function createStyles() {
const style = document.createElement("style");
style.textContent = `
.word-explosion-button {
position: absolute; /* 修改为 absolute，方便根据选中区域定位 */
background-color: rgba(217, 12, 12, 0.4);
color: #000;
border: none;
border-radius: 50%;
cursor: pointer;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease;
z-index: 9999;
width: 30px; /* 设置按钮的宽度 */
height: 30px; /* 设置按钮的高度 */
display: flex;
justify-content: center;
align-items: center;
}
.word-explosion-button:hover {
background-color: rgba(217, 12, 12, 0.75);
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.word-explosion-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(240, 240, 240, 0.8);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
z-index: 10000;
max-width: 80%;
max-height: 80%;
overflow: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.word-explosion-word {
margin: 2px;
padding: 4px 8px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
display: inline-flex;
align-items: center;
}
.word-explosion-word.selected {
background-color: #0078D4;
color: white;
}
.word-explosion-copy {
display: block;
margin-top: 15px;
padding: 10px 20px;
background-color: #0078D4;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
}
.word-explosion-copy:hover {
background-color: #106EBE;
}
`;
document.head.appendChild(style);
}
/**
* 创建按钮
* 该函数用于创建并插入一个按钮，用于触发大爆炸功能。
*/
function createButton() {
button = document.createElement("button");
button.textContent = "💥";
button.className = "word-explosion-button";
button.style.display = "none";
document.body.appendChild(button);
}
/**
* 显示按钮并将其定位到选中文本旁边
* 该函数用于在选中文本时显示按钮，并将其定位到选中文本的旁边。
*/
function showButtonAtSelection() {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const rect = range.getBoundingClientRect(); // 获取选中区域的矩形框
button.style.top = `${rect.bottom + window.scrollY + 5}px`; // 按钮显示在选中区域下方
button.style.left = `${rect.left + window.scrollX}px`; // 按钮靠左边缘
button.style.display = "block";
}
}
/**
* 隐藏按钮
* 该函数用于隐藏按钮。
*/
function hideButton() {
button.style.display = "none";
}
/**
* 创建弹出窗口
* 该函数用于创建并插入一个弹出窗口，用于显示分词结果。
*/
function createPopup() {
popupContainer = document.createElement("div");
popupContainer.className = "word-explosion-popup";
popupContainer.style.display = "none";
document.body.appendChild(popupContainer);
}
/**
* 显示弹出窗口
* 该函数用于显示弹出窗口，并填充分词结果。
* @param {Array} words - 分词结果数组
*/
function showPopup(words) {
popupContainer.innerHTML = "";
words.forEach((word) => {
const wordButton = document.createElement("button");
wordButton.textContent = word;
wordButton.className = "word-explosion-word";
wordButton.addEventListener("click", () =>
wordButton.classList.toggle("selected")
);
popupContainer.appendChild(wordButton);
});
const copyButton = document.createElement("button");
copyButton.textContent = "复制选中文本";
copyButton.className = "word-explosion-copy";
copyButton.style.width = "100%";
copyButton.addEventListener("click", copySelectedWords);
popupContainer.appendChild(copyButton);
popupContainer.style.display = "flex";
}
/**
* 隐藏弹出窗口
* 该函数用于隐藏弹出窗口。
*/
function hidePopup() {
popupContainer.style.display = "none";
}
/**
* 改进的分词函数
* 该函数用于对输入的文本进行分词。
* @param {string} text - 需要分词的文本
* @returns {Array} - 分词结果数组
*/
function wordExplosion(text) {
const regex =
/[\u4e00-\u9fa5]|[a-zA-Z]+|[0-9]+|[^\u4e00-\u9fa5a-zA-Z0-9]+/g;
return text.match(regex) || [];
}
/**
* 复制选中的单词
* 该函数用于将选中的单词复制到剪贴板。
*/
function copySelectedWords() {
const selectedWords = Array.from(
popupContainer.querySelectorAll(".word-explosion-word.selected")
)
.map((button) => button.textContent)
.join("");
navigator.clipboard
.writeText(selectedWords)
.then(() => {
alert(`已复制：${selectedWords}！`);
})
.catch((err) => {
console.error("复制失败: ", err);
});
}
/**
* 监听选择事件
* 该函数用于监听用户的选择事件，当用户选中文本时，显示按钮并定位到选中文本旁边。
*/
document.addEventListener("selectionchange", function () {
const selection = window.getSelection();
if (selection.toString().trim() !== "") {
showButtonAtSelection(); // 选中文本时显示按钮并定位
} else {
hideButton();
}
});
/**
* 监听按钮点击事件
* 该函数用于监听按钮点击事件，当按钮被点击时，显示弹出窗口并隐藏按钮。
*/
function onButtonClick() {
const selection = window.getSelection();
const text = selection.toString();
const words = wordExplosion(text);
showPopup(words);
hideButton();
}
/**
* 初始化
* 该函数用于初始化样式、按钮和弹出窗口，并添加事件监听器。
*/
function initialize() {
createStyles();
createButton();
createPopup();
button.addEventListener("click", onButtonClick);
}
/**
* 点击其他地方时关闭弹窗
* 该函数用于监听点击事件，当点击事件发生在按钮或弹出窗口之外时，隐藏弹出窗口。
*/
document.addEventListener("click", function (event) {
if (event.target !== button && !popupContainer.contains(event.target)) {
hidePopup();
}
});
// 启动初始化
initialize();
})();