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 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节，有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突