O365 SharePoint Online列表分页后文本转HTML失效求助

问题分析 #

我清楚你碰到的麻烦——SharePoint Online列表的分页加载是异步AJAX请求，当你点击分页查看第31条及以后的数据时，新的表格单元格（TD元素）是动态添加到页面DOM里的，但你的原始脚本只在页面初始加载、分组展开时执行转换，没监听分页后的DOM更新，导致新加载的内容没法被处理。

修正后的代码 #

下面是优化后的脚本，改用MutationObserver监听DOM变化，确保所有动态加载的TD元素都能被捕获并完成HTML转换：

<script type="text/javascript">
function TextToHTML(NodeSet, HTMLregexp) {
    var CellContent = "";
    var i=0;
    while (i < NodeSet.length){
        try {
            CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
            // 调整正则匹配规则，只要单元格包含HTML标签就触发转换
            if (HTMLregexp.test(CellContent)) {
                // 手动转义字符，确保HTML标签能正确渲染
                NodeSet[i].innerHTML = CellContent.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
            }
        } catch(err){}
        i=i+1;
    }
}

// 封装初始化转换的函数
function initTextToHTML() {
    var regexpTD = new RegExp("<([a-zA-Z]*)(.|\\s)*/\\1?>");
    TextToHTML(document.getElementsByTagName("TD"), regexpTD);
}

// 使用MutationObserver监听DOM新增元素，处理分页加载的内容
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length > 0) {
            mutation.addedNodes.forEach(function(node) {
                // 检查新增节点是否是TD，或者包含TD的容器
                if (node.tagName === "TD") {
                    initTextToHTML();
                } else if (node.querySelectorAll) {
                    var tdNodes = node.querySelectorAll("TD");
                    if (tdNodes.length > 0) {
                        initTextToHTML();
                    }
                }
            });
        }
    });
});

// 配置监听范围，聚焦到列表表格容器提升性能
var config = { childList: true, subtree: true };
var listContainer = document.querySelector(".ms-listviewtable") || document.body;
observer.observe(listContainer, config);

// 页面初始加载时执行一次转换
initTextToHTML();

// 保留原有的分组展开处理逻辑，避免冲突
ExpGroupRenderData = (function (old) {
    return function (htmlToRender, groupName, isLoaded) {
        var result = old(htmlToRender, groupName, isLoaded);
        initTextToHTML();
        return result;
    };
})(ExpGroupRenderData);

// 保留预览面板的转换逻辑
if (typeof(showpreview1)=="function") {
    showpreview1 = (function (old) {
        return function (o) {
            var result = old(o);
            initTextToHTML();
            return result;
        };
    })(showpreview1);
}
</script>

关键改动说明 #

• 替换定时轮询为MutationObserver：更高效地监听DOM变化，一旦分页加载的新TD元素被添加，立即触发转换，避免了定时轮询的延迟和性能浪费。
• 优化正则匹配规则：不再严格要求整行都是HTML标签，只要单元格内包含HTML结构就执行转换，适配你计算列的输出格式。
• 手动处理转义字符：显式把<和>转换为<和>，确保HTML标签能被浏览器正确解析渲染。
• 缩小监听范围：优先监听列表表格容器，减少不必要的DOM检查，提升脚本运行效率。

部署与配置提示 #

1. 如果你用的是现代体验的SharePoint列表，建议通过SPFx Web Part注入脚本；经典体验下可以使用Script Editor Web Part把脚本添加到列表视图页面。
2. 确认你的计算列设置正确：数值类型设为"Number"，公式生成的是转义后的HTML字符串（比如你现有的<div...>格式）。

你的计算列公式参考 #

颜色计算列：

=IF([Trend]="Cancelled","DarkGray",IF([Trend]="Completed","DodgerBlue",IF([Trend]="Declining","DarkOrange",IF([Trend]="Improving","ForestGreen",IF([Trend]="No Change","ForestGreen",IF([Trend]="Not Started","White",IF([Trend]="On Hold","DarkGray","")))))))

HTML生成列：

="<div style='position:relative;display:inline-block;width:100%;'> <div style='width:100%;display:inline-block;text-align:center;border:1px solid "&[VPN provisioning_Clr]&";position:absolute;color:"&[VPN provisioning_Clr]&";'> "&[VPN provisioning]&" </div> <div style='display:inline-block;width: 100%;background-color:"&[VPN provisioning_Clr]&";text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;'>&[VPN provisioning]&" </div> </div>"

内容的提问来源于stack exchange，提问作者Barun Ghatak