使用原生JavaScript在富文本区域中替换或包裹选中内容-html教程-PHP中文网

使用原生javascript在富文本区域中替换或包裹选中内容

本文详细介绍了如何利用原生JavaScript的Selection和Range API，在HTML富文本输入区域或任何可编辑内容中精确地查找并替换或包裹用户选中的文本。教程涵盖了获取选区、操作选区范围、删除原有内容、创建新节点以及插入新内容的核心步骤，并提供了两种具体实现：将选中内容替换为指定文本，以及将选中内容的文本内容进行包裹。

在现代Web应用中，富文本编辑器是常见的组件。用户经常需要对编辑器中的特定文本进行操作，例如替换、加粗、斜体等。与简单的字符串查找替换不同，这些操作通常针对的是用户当前“选中”的文本。本教程将深入探讨如何使用原生JavaScript（不依赖任何库，如jQuery）来精确地识别并替换或包裹HTML内容中的选中文本。

核心概念：Selection 和 Range API

要操作用户选中的文本，我们主要依赖两个核心的Web API：Selection 和 Range。

window.getSelection(): 这个方法返回一个 Selection 对象，代表用户当前选定的文本范围或光标的当前位置。一个 Selection 对象可以包含一个或多个 Range 对象（尽管在大多数常见情况下，用户只会创建一个单一的连续选区）。
Selection 对象: Selection 对象提供了一系列方法来查询和修改当前选区。其中最常用的是 rangeCount 属性（表示选区中包含的 Range 对象的数量）和 getRangeAt(index) 方法（用于获取指定索引处的 Range 对象）。
Range 对象: Range 对象代表文档中的一个连续区域，可以包含节点的一部分或整个节点。它提供了丰富的API来精确地操作这个区域，例如：
- deleteContents(): 从文档中删除 Range 包含的内容。
- extractContents(): 从文档中删除 Range 包含的内容，并返回一个包含这些内容的 DocumentFragment。
- insertNode(node): 在 Range 的起始位置插入一个节点。
- surroundContents(newParent): 用一个新节点包裹 Range 的内容。

实现选中内容替换的步骤

无论是替换还是包裹选中内容，基本流程都相似：

立即学习“Java免费学习笔记（深入）”；

获取当前选区 (Selection)：使用 window.getSelection()。
获取选区范围 (Range)：通过 selection.getRangeAt(0) 获取第一个（也是最常见的）选区范围。
操作选区内容：
- 对于替换：先删除选中内容 (deleteContents())，再插入新内容 (insertNode())。
- 对于包裹：提取选中内容 (extractContents())，创建一个包裹元素，将提取的内容添加到包裹元素中，然后将包裹元素插入到原位置 (insertNode())。
更新选区 (可选)：操作完成后，通常会清除旧选区并设置新的选区，以保持光标的合理位置。

示例一：将选中内容替换为指定文本

这个示例演示了如何将用户选中的文本替换为一段预设的新文本。

HTML 结构:

我们将创建一个可编辑的 div 区域，以及一个触发替换操作的按钮。

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

815

查看详情

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>替换选中内容</title>
    <style>
        #editor {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
            margin-bottom: 10px;
            font-family: Menlo, Monaco, 'Courier New', monospace;
            font-size: 15px;
            line-height: 23px;
            white-space: pre-wrap; /* 允许换行 */
            color: #bababa;
            background-color: #0c0a08;
        }
        button {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <h1>JavaScript 选中内容替换教程</h1>

    <div id="editor" contenteditable="true">
        <div>
            <span style="color: #bababa"> selectionRange</span
            ><span style="color: #9d8262">.</span
            ><span style="color: #bababa">range</span
            ><span style="color: #9d8262">.</span
            ><span style="color: #bababa">endContainer</span
            ><span style="color: #9d8262">.</span
            ><span style="color: #bababa">innerHTML</span
            ><span style="color: #9d8262"> =</span
            ><span style="color: #bababa"> newParent</span
            ><span style="color: #9d8262">.</span
            ><span style="color: #bababa">innerHTML;</span>
        </div>
        <p>请在此处选择一些文本，然后点击按钮进行替换。</p>
        <p>例如，您可以选择 "innerHTML" 或 "newParent"。</p>
    </div>

    <button onclick="replaceSelectedText('REPLACED_TEXT');">替换选中内容</button>

    <script>
        function replaceSelectedText(newText) {
            const selection = window.getSelection();
            if (!selection.rangeCount) {
                console.log("没有选中的内容。");
                return; // 没有选区，直接返回
            }

            const range = selection.getRangeAt(0); // 获取第一个选区范围

            // 1. 删除选中的内容
            range.deleteContents();

            // 2. 创建新的文本节点
            const textNode = document.createTextNode(newText);

            // 3. 在原选区位置插入新文本节点
            range.insertNode(textNode);

            // 4. (可选) 更新选区，将光标定位到新插入文本的末尾
            range.setStartAfter(textNode);
            range.setEndAfter(textNode);
            selection.removeAllRanges(); // 清除旧选区
            selection.addRange(range);   // 添加新选区
        }
    </script>

</body>
</html>

登录后复制

代码解析:

window.getSelection() 获取当前的 Selection 对象。
selection.rangeCount 检查是否有选区。如果没有，函数直接返回。
selection.getRangeAt(0) 获取用户创建的第一个（也是通常唯一一个）选区范围。
range.deleteContents() 是实现替换的关键一步，它会直接从DOM中移除 Range 所包含的所有内容。
document.createTextNode(newText) 创建一个包含新文本的文本节点。如果需要插入更复杂的HTML结构，可以创建 DocumentFragment 或 HTMLElement。
range.insertNode(textNode) 将新创建的文本节点插入到 Range 的起始位置（即原选区被删除后的位置）。
最后的可选步骤 range.setStartAfter(textNode); range.setEndAfter(textNode); selection.removeAllRanges(); selection.addRange(range); 用于将光标定位到替换后的文本末尾，提供更好的用户体验。

示例二：将选中内容的文本内容进行包裹

这个示例演示了如何提取选中内容的纯文本，然后用一个带有特定前缀和后缀的 <span> 元素将其包裹起来。这与问题答案中提供的 {{C1::...}} 格式类似。

HTML 结构 (同上):

<!-- ... (HTML结构同上，但按钮的onclick事件不同) ... -->
<button onclick="wrapSelectedTextContent('{{C1::', '}}');">包裹选中内容</button>

<script>
    function wrapSelectedTextContent(prefix = '', suffix = '') {
        const selection = window.getSelection();
        if (!selection.rangeCount) {
            console.log("没有选中的内容。");
            return;
        }

        const range = selection.getRangeAt(0);

        // 1. 提取选中的内容。extractContents() 会将内容从DOM中移除，并返回一个 DocumentFragment。
        const selectedContentFragment = range.extractContents();

        // 2. 获取提取内容的纯文本
        const selectedText = selectedContentFragment.textContent;

        // 3. 创建一个新的 span 元素作为包裹器
        const wrapperSpan = document.createElement("span");
        // 将纯文本与前缀和后缀组合后设置为 span 的 innerHTML
        wrapperSpan.innerHTML = `${prefix}${selectedText}${suffix}`;

        // 4. 将新的包裹元素插入到原选区位置
        range.insertNode(wrapperSpan);

        // 5. (可选) 更新选区，将光标定位到新插入元素的末尾
        range.setStartAfter(wrapperSpan);
        range.setEndAfter(wrapperSpan);
        selection.removeAllRanges();
        selection.addRange(range);
    }
</script>
<!-- ... (其余HTML内容) ... -->

登录后复制

代码解析:

range.extractContents() 是这里的关键。它不仅删除了选中的内容，还将其作为一个 DocumentFragment 返回。这意味着如果选中的内容包含多个DOM节点，它们都会被包含在这个 DocumentFragment 中。
selectedContentFragment.textContent 获取 DocumentFragment 中所有节点的纯文本内容，忽略其内部的HTML结构。
document.createElement("span") 创建一个新的 <span> 元素。
wrapperSpan.innerHTML =${prefix}${selectedText}${suffix}`将提取的纯文本与指定的前缀和后缀组合，并设置为新元素的innerHTML`。
range.insertNode(wrapperSpan) 将这个新的 <span> 元素插入到DOM中，替换了原来的选中内容。
同样，最后更新选区的步骤是可选的，用于优化用户体验。

deleteContents() 与 extractContents() 的区别:

deleteContents(): 仅从DOM中删除选中的内容，不返回任何东西。
extractContents(): 从DOM中删除选中的内容，并返回一个包含这些内容的 DocumentFragment。如果你需要对被删除的内容进行进一步处理（例如像本例中获取其 textContent 或重新包裹它），extractContents() 是更合适的选择。

注意事项

浏览器兼容性: window.getSelection() 和 Range API 在现代浏览器中都有良好的支持。对于IE9及以下版本，可能需要使用 document.selection 和 TextRange 对象，但这在当前Web开发中已不常见。
空选区处理: 在执行任何操作之前，务必检查 selection.rangeCount 以确保用户确实有内容被选中，避免运行时错误。
富文本编辑器集成: 如果你的应用中使用了现成的富文本编辑器（如nicEditor、TinyMCE、Quill等），它们通常会提供自己的API来操作选区。直接使用 window.getSelection() 和 Range API 可能会与编辑器的内部逻辑冲突，或者在某些情况下无法正确处理编辑器的复杂DOM结构。在集成时，建议优先使用编辑器提供的API。如果编辑器没有提供所需的功能，再考虑使用原生API，但需进行充分测试。
内容复杂性: 如果选中的内容包含复杂的HTML结构（例如嵌套的 div、img 等），extractContents() 会保留这些结构。但如果像示例二那样，你只取 textContent，则会丢失所有HTML格式。根据需求选择是保留结构还是只取纯文本。
安全性: 如果替换或插入的内容来源于用户输入，请务必进行适当的HTML转义或清理，以防止跨站脚本攻击（XSS）。

总结

通过 window.getSelection() 和 Range API，JavaScript提供了强大而灵活的机制来操作用户在网页上选中的文本。无论是简单的文本替换，还是更复杂的文本内容包裹，这些原生API都能帮助开发者精确地控制DOM。理解并熟练运用这些API，是构建高性能、用户友好的富文本交互功能的关键。

以上就是使用原生JavaScript在富文本区域中替换或包裹选中内容的详细内容，更多请关注php中文网其它相关文章！