英文句子首字母转换为大写
朋友做亚马逊电商,商品描述首字母需要大写,所以写了这段代码,可以实现首字母大写需求
提示:英文中不能出现无故空格,会导致失败
如有大神指点一二,小弟定当虚心讨教
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首字母大写</title>
</head>
<body><br>
<h1 style="margin-left: 80px;">首字母大写</h1>
<input type="text" class="in"
style="width: 1000px;height: 34px;font-size: 20px;margin-top: 20px;margin-left: 80px;"><br><br>
<input type="button" class="ipt" value="点我转换" style="width: 100px;font-size:18px;height: 30px;margin-left: 150px;">
<!-- <button class="btn" style="margin-left: 50px;background: rgb(238, 16, 16);width: 70px;height: 30px;font-weight: 500;">清空</button> -->
<button id="btn" onclick="copy()"
style="margin-left: 50px;background: rgba(22, 238, 112, 0.486);width: 100px;height: 30px;font-weight: 500;font-size: 18px;">一键复制</button>
<div class="out" style="margin-top: 50px;font-size: 22px;margin-left: 80px;"></div>
<textarea id="input" style="opacity: 0;"">这是幕后黑手</textarea>
<p class=" copyright" style="margin-left: 80px;color: orangered;"></p>
<script>
document.querySelector('.ipt').onclick = function () {
function title(str) {
var arr = [];
str.split(' ').forEach(function (item) {
//转化为数组,用数组的 forEach 方法
var strs = item.toLowerCase().split('');
strs[0] = strs[0].toUpperCase(); //首字母大写
item = strs.join('');
arr.push(item);
});
arr = arr.join(' ');
console.log(arr);
document.querySelector('.out').innerHTML = arr
console.log(arr)
return arr;
}
let ccc = document.querySelector('.in').value
title(`${ccc}`);
}
</script>
<!-- <script>
//清空按钮清空输入框内容
document.querySelector('.btn').onclick = function () {
document.querySelector('.in').value = ''
}
</script> -->
<script>
function copy() {
var text = document.querySelector(".out").textContent;
console.log(text);
document.getElementById("input").value = text;
// 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
// alert("复制成功");
document.querySelector('.in').value = '';
document.querySelector('.copyright').innerHTML = '复制成功'
}
</script>
</body>
</html>
------------效果展示----------