按行驼峰命名单词转换器
// ==UserScript==
// @name 按行驼峰命名单词转换器
// @namespace chatGPTFucker
// @version 0.0.1
// @description 将每行以空格分隔的单词，按驼峰命名合并为一行，并提供复制功能。
// @author chatGPTFucker
// @match https://www.sogou.com/camelfucker
// @grant GM_setClipboard
// @icon data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iNTEyLjAwMDAwMHB0IiBoZWlnaHQ9IjUxMi4wMDAwMDBwdCIgdmlld0JveD0iMCAwIDUxMi4wMDAwMDAgNTEyLjAwMDAwMCIKIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoKPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsNTEyLjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIKZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIj4KPHBhdGggZD0iTTAgNDMyMCBsMCAtNDgwIDMyMCAwIDMyMCAwIDAgMTYwIDAgMTYwIDMyMCAwIDMyMCAwIDAgLTE2MDAgMAotMTYwMCAtMzIwIDAgLTMyMCAwIDAgLTMyMCAwIC0zMjAgOTYwIDAgOTYwIDAgMCAzMjAgMCAzMjAgLTMyMCAwIC0zMjAgMCAwCjE2MDAgMCAxNjAwIDMyMCAwIDMyMCAwIDAgLTE2MCAwIC0xNjAgMzIwIDAgMzIwIDAgMCA0ODAgMCA0ODAgLTE2MDAgMCAtMTYwMAowIDAgLTQ4MHoiLz4KPHBhdGggZD0iTTI1NjAgMjcyMCBsMCAtNDgwIDMyMCAwIDMyMCAwIDAgMTYwIDAgMTYwIDE2MCAwIDE2MCAwIDAgLTgwMCAwCi04MDAgLTE2MCAwIC0xNjAgMCAwIC0zMjAgMCAtMzIwIDY0MCAwIDY0MCAwIDAgMzIwIDAgMzIwIC0xNjAgMCAtMTYwIDAgMAo4MDAgMCA4MDAgMTYwIDAgMTYwIDAgMCAtMTYwIDAgLTE2MCAzMjAgMCAzMjAgMCAwIDQ4MCAwIDQ4MCAtMTI4MCAwIC0xMjgwIDAKMCAtNDgweiIvPgo8L2c+Cjwvc3ZnPgo=
// ==/UserScript==
(function() {
'use strict';
// 修改标题 ( 脚本功能: i love you => iLoveYou )
document.title = '按行驼峰命名单词转换器';
// 在网页上添加需要的元素
const wrapper = document.createElement('div');
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
wrapper.style.alignItems = 'stretch';
wrapper.style.width = '300px';
wrapper.style.padding = '10px';
const inputLabel = document.createElement('label');
inputLabel.textContent = '输入单词：(e.g. Lorem ipsum dolor sit amet)';
const outputLabel = document.createElement('label');
outputLabel.textContent = '输出结果：(e.g. loremIpsumDolorSitAmet)';
const inputBox = document.createElement('textarea');
inputBox.style.resize = 'none';
inputBox.style.height = '120px';
inputBox.addEventListener('input', convertWords);
const outputBox = document.createElement('textarea');
outputBox.style.resize = 'none';
outputBox.style.height = '120px';
outputBox.setAttribute('readonly', '');
const copyButton = document.createElement('button');
copyButton.style.width = '100%';
copyButton.textContent = '复制';
copyButton.addEventListener('click', copyOutput);
wrapper.appendChild(inputLabel);
wrapper.appendChild(inputBox);
wrapper.appendChild(outputLabel);
wrapper.appendChild(outputBox);
wrapper.appendChild(copyButton);
document.body.prepend(wrapper);
/**
* 将每行以空格分隔的单词，按驼峰命名合并为一行
*/
function convertWords() {
const lines = inputBox.value.trim().split('\n');
const result = lines.map(line => {
const words = line.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1));
return words.map((word, index) => index === 0 ? word.toLowerCase() : word).join('');
}).join('\n');
outputBox.value = result;
}
/**
* 复制输出结果
*/
function copyOutput() {
GM_setClipboard(outputBox.value);
// alert('复制成功！');
const message = new Message();
message.show('复制成功！','tick');
}
// 添加 style 元素
const style = document.createElement('style');
style.innerHTML = `
center, hr {
display: none;
}
`;
document.head.appendChild(style);
// My Message 实现类似this.$message的效果
class Message {
constructor() {
this.container = document.createElement('div');
this.container.id = 'messageContainer';
this.container.style.position = 'fixed';
this.container.style.top = '20px';
this.container.style.left = '50%';
this.container.style.transform = 'translateX(-50%)';
this.container.style.display = 'flex';
this.container.style.alignItems = 'center';
this.container.style.justifyContent = 'center';
this.container.style.zIndex = '9999';
document.body.appendChild(this.container);
}
show(message, iconType) {
const p = document.createElement('p');
p.style.margin = '10px';
p.style.padding = '10px';
p.style.backgroundColor = '#f5f5f5';
p.style.borderRadius = '4px';
p.style.display = 'flex';
p.style.alignItems = 'center';
let icon;
if (iconType === 'tick') {
icon = document.createElement('span');
icon.style.width = '16px';
icon.style.height = '16px';
icon.style.backgroundColor = 'green';
icon.style.borderRadius = '50%';
icon.style.marginRight = '10px';
const checkmark = document.createElementNS("http://www.w3.org/2000/svg", "svg");
checkmark.setAttribute("viewBox", "0 0 24 24");
checkmark.setAttribute("width", "16");
checkmark.setAttribute("height", "16");
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M9 16.2l-3.6-3.6c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L9 11.6l6.2-6.2c.8-.8 2-.8 2.8 0s.8 2 0 2.8L11.8 16.2c-.4.4-.8.6-1.3.6-.5 0-.9-.2-1.3-.6z");
path.setAttribute("fill", "white");
checkmark.appendChild(path);
icon.appendChild(checkmark);
} else {
icon = document.createElement('span');
icon.style.width = '16px';
icon.style.height = '16px';
icon.style.backgroundColor = 'green';
icon.style.borderRadius = '50%';
icon.style.marginRight = '10px';
}
p.appendChild(icon);
const text = document.createTextNode(message);
p.appendChild(text);
this.container.appendChild(p);
setTimeout(() => {
this.container.removeChild(p);
}, 3000);
}
}
// 使用示例
// const message = new Message();
// message.show('这是一条消息提示');
// message.show('这是一条消息提示', 'tick'); // 显示绿色勾图标的消息提示
})();