nutchcake 2014-05-07 07:57 采纳率: 0%
浏览 1281

JS替换选中文字......

鼠标选某一个div中的文字后，把这段选中的文字包裹在一个a标签之中。。。

  • 写回答

1条回答 默认 最新

  • ChatGPTᴼᴾᴱᴺᴬᴵ 2023-12-09 18:48
    关注

    所有内容均由人工智能模型输出，其内容的准确性和完整性无法保证，不代表我的态度或观点。
    （文心一言专栏，V2.5.2版本，2023.12.09）

    该回答引用文心大模型3.5，仅提供参考，不保证完全正确
    要实现这个功能，你可以使用 JavaScript 的 window.getSelection() API，它可以让你访问用户选择的文本。然后，你可以创建一个新的 a 元素，将选中的文本设置为该元素的 innerHTML，然后将该元素插入到原来的位置。

    下面是一个示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换选中文字</title>
</head>
<body>
    <div id="myDiv" contenteditable="true" style="border: 1px solid black; height: 200px;">
        你可以在这个区域选中文字，然后点击按钮来替换选中的文字。
    </div>
    <button onclick="replaceSelectedText()">替换选中文字</button>

    <script>
        function replaceSelectedText() {
            // 获取选中的文本
            const selection = window.getSelection();
            if (selection.rangeCount === 0) {
                alert('请先选中一些文字');
                return;
            }
            const range = selection.getRangeAt(0);
            const selectedText = range.toString();
            if (selectedText.length === 0) {
                alert('请先选中一些文字');
                return;
            }

            // 创建一个新的 a 元素，将选中的文本设置为该元素的 innerHTML
            const newElement = document.createElement('a');
            newElement.href = 'https://www.example.com'; // 设置 a 标签的 href 属性
            newElement.innerHTML = selectedText;
            newElement.style.color = 'blue'; // 设置 a 标签的文本颜色为蓝色
            newElement.style.textDecoration = 'underline'; // 设置 a 标签的文本装饰为下划线

            // 将新的 a 元素插入到原来的位置
            range.deleteContents(); // 删除选中的文本
            range.insertNode(newElement); // 插入新的 a 元素
        }
    </script>
</body>
</html>

    这个示例中，我们使用了一个可编辑的 div 元素来让用户输入和选择文本。当用户点击按钮时，调用 replaceSelectedText 函数来获取选中的文本，创建一个新的 a 元素，并将选中的文本设置为该元素的 innerHTML。然后，将新的 a 元素插入到原来的位置，替换掉选中的文本。注意，我们在 a 标签上设置了 href 属性，这样用户就可以点击该标签来访问指定的 URL。

    评论

报告相同问题？

悬赏问题

  • ¥15 怎么把多于硬盘空间放到根目录下
  • ¥15 Matlab问题解答有两个问题
  • ¥50 Oracle Kubernetes服务器集群主节点无法访问，工作节点可以访问
  • ¥15 LCD12864中文显示
  • ¥15 在使用CH341SER.EXE时不小心把所有驱动文件删除了怎么解决
  • ¥15 gsoap生成onvif框架
  • ¥15 有关sql server business intellige安装，包括SSDT、SSMS。
  • ¥15 stm32的can接口不能收发数据
  • ¥15 目标检测算法移植到arm开发板
  • ¥15 利用JD51设计温度报警系统