如何从window.getSelection()获取带内联样式的HTML字符串？

要从window.getSelection()获取包含内联样式的HTML字符串，不能直接用toString()（它仅返回纯文本），需要通过Range对象克隆选中内容并处理样式，以下是两种实用方案：

方案1：保留原有内联样式 #

直接克隆选中的DOM内容，获取其HTML结构（原内容的内联样式会完整保留）：

var funcToInject = function () {
    var selection = window.getSelection();
    if (selection.rangeCount === 0) return '';
    
    var range = selection.getRangeAt(0);
    var tempContainer = document.createElement('div');
    tempContainer.appendChild(range.cloneContents());
    return tempContainer.innerHTML;
};

比如选中页面中<p style='color: red;'>Red text</p>的内容，该函数会返回<p style="color: red;">Red text</p>（浏览器可能自动转换引号格式，不影响样式生效）。

方案2：强制转为内联样式（兼容外部CSS） #

如果选中内容的样式来自外部CSS类或全局样式，方案1无法保留样式，此时可将计算后的样式转为内联样式，确保脱离原页面环境后样式仍生效：

var funcToInject = function () {
    var selection = window.getSelection();
    if (selection.rangeCount === 0) return '';
    
    var range = selection.getRangeAt(0);
    var tempContainer = document.createElement('div');
    tempContainer.appendChild(range.cloneContents());
    
    // 遍历所有元素，将计算样式转为内联
    Array.from(tempContainer.querySelectorAll('*')).forEach(element => {
        const computedStyle = window.getComputedStyle(element);
        for (const prop of computedStyle) {
            element.style.setProperty(prop, computedStyle.getPropertyValue(prop));
        }
        // 移除依赖外部样式的类名和ID
        element.removeAttribute('class');
        element.removeAttribute('id');
    });
    
    // 按需包裹在p标签中（匹配你的示例需求）
    return `<p>${tempContainer.innerHTML}</p>`;
};

注意事项 #

• 该函数需要在页面上下文中运行（Chrome扩展中需通过内容脚本或注入到页面的脚本执行，不能在扩展后台脚本中调用）。
• 如果需要严格匹配示例格式（比如强制用单引号），可对返回的HTML字符串做替换处理，例如tempContainer.innerHTML.replace(/"/g, "'")。

内容的提问来源于stack exchange，提问作者Rayane T.B.C