JavaScript实现字符串首字母大写、翻转字符串、获取用户选定的文本-编程知识

JavaScript实现字符串首字母大写、翻转字符串、获取用户选定的文本

字符串首字母大写

使用 JavaScript 函数 capitalize 来将字符串的首字母大写，并将结果显示在网页上。以下是一个简单的 HTML 使用案例：
请添加图片描述

<!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><input type="text" id="inputString" placeholder="输入字符串"><button onclick="capitalizeString()">点击首字母大写</button><p id="result"></p><script>const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);function capitalizeString() {const inputStr = document.getElementById('inputString').value;const capitalizedStr = capitalize(inputStr);document.getElementById('result').innerText = `字符串首字母大写: ${capitalizedStr}`;}</script>
</body></html>

实现思路：

在 HTML 中创建一个输入框和一个按钮，允许用户输入字符串并将其首字母大写。
创建一个点击事件 capitalizeString，该事件会获取用户输入的字符串，并调用 capitalize 函数来将其首字母大写。
在页面上显示处理后的字符串，告知用户首字母大写后的结果。

描述：这个案例中，用户可以通过输入框输入字符串，并通过点击按钮来将字符串的首字母大写。当用户点击按钮时，页面会显示经过处理后的字符串，以便用户了解首字母大写后的结果。

翻转字符串

在 HTML 中，你可以创建一个简单的演示来展示如何翻转字符串。以下是一个基本的实现思路和相关描述：

实现思路

HTML 结构：
- 创建一个输入框和按钮，当用户输入字符串并点击按钮时会触发 JavaScript 函数以翻转字符串。
JavaScript 函数：
- 编写 JavaScript 函数 reverse 来翻转传入的字符串。
- 在函数中，使用 split 方法将字符串拆分为单个字符数组，然后使用 reverse 方法将数组中的元素顺序颠倒，最后使用 join 方法将数组连接成一个新的字符串。

HTML 示例

<!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><h1>翻转字符串</h1><input type="text" id="inputString" placeholder="输入字符串"><button onclick="reverseString()">翻转</button><p id="reversedResult"></p><script>const reverse = str => str.split('').reverse().join('');function reverseString() {const inputStr = document.getElementById("inputString").value;const resultDisplay = document.getElementById("reversedResult");const reversedStr = reverse(inputStr);resultDisplay.textContent = "结果: " + reversedStr;}</script>
</body></html>

在这个例子中，用户可以输入一个字符串，然后点击按钮以翻转该字符串，并显示翻转后的结果。

获取用户选定的文本

在 HTML 中，你可以创建一个简单的演示来展示如何获取用户选定的文本。以下是一个基本的实现思路和相关描述：

实现思路

HTML 结构：
- 创建一个包含文本内容的元素，例如段落或者 div。
- 添加一个按钮，当用户选定文本后点击按钮时会触发 JavaScript 函数以获取所选的文本。
JavaScript 函数：
- 编写 JavaScript 函数 getSelectedText 来获取用户选择的文本。
- 在函数中，使用 window.getSelection().toString() 方法获取用户选定的文本并返回。

HTML 示例

<!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><h1>获取用户选定的文本</h1><p>在下面的段落中选择一些文字，然后点击按钮选定 </p><p id="selectableText">找到一个恰当的度，让你既能接纳当下的自己，又愿意为了未来而做一些调整和改变。心灵更加开放，而不是更加封闭；更加愿意成长，而不是固步自封。所以开放、弹性，接纳自己和他人，才是一颗健康的心应该走向的方向。——《为什么我们总是在防御》</p><button onclick="readSelectedText()">选定</button><p id="selectedResult"></p><script>const getSelectedText = () => window.getSelection().toString();function readSelectedText() {const selectedText = getSelectedText();const resultDisplay = document.getElementById("selectedResult");if (selectedText) {resultDisplay.textContent = "你的选择: " + selectedText;} else {resultDisplay.textContent = "请先选择一些文本.";}}</script>
</body></html>