如何获取子节点相对于父节点的HTML索引（以字符为单位计数）

要获取嵌套节点相对于外层节点的HTML字符索引（以HTML字符串的每个字符为单位计数），可以通过临时标记替换法实现，该方法能避免正则匹配的不确定性，且支持任意深度的嵌套节点。

实现代码 #

function get_IndHtml_of_eltInner_in_eltOuter(elt_inner, elt_outer) {
    // 保存目标节点的原始HTML内容
    const originalHtml = elt_inner.outerHTML;
    // 创建唯一临时标记（时间戳确保不会与原有内容重复）
    const tempMarker = `___UNIQUE_TEMP_MARKER_${Date.now()}___`;
    
    // 临时替换目标节点为标记
    elt_inner.outerHTML = tempMarker;
    // 获取外层节点的HTML字符串
    const outerHtml = elt_outer.innerHTML;
    // 查找标记的起始索引
    const index = outerHtml.indexOf(tempMarker);
    
    // 恢复目标节点的原始内容
    elt_inner.outerHTML = originalHtml;
    
    // 返回索引，未找到则返回-1
    return index !== -1 ? index : -1;
}

// 测试示例
document.body.innerHTML = '<div id="main_parag">Sample 789<!-- comment 23 -->29<script>let i = 47;</script>59<strong>69<span id="AA">Get_My_Index</span></strong></div>';
let elt_outer = $('#main_parag')[0];
let elt_inner = $('#AA')[0];
let indHtml = get_IndHtml_of_eltInner_in_eltOuter(elt_inner, elt_outer); 
console.log(indHtml); // 输出：71

方法说明 #

1. 临时标记替换：通过创建唯一的临时标记替换目标节点，确保在HTML字符串中能精准定位到目标节点的位置，避免正则匹配重复内容的问题。
2. DOM恢复：操作完成后立即将目标节点恢复为原始HTML，不会对页面DOM造成持久影响。
3. 兼容性：支持所有现代浏览器，无需依赖额外库（示例中使用jQuery仅为获取节点，也可改用document.getElementById等原生方法）。

注意事项 #

• 若目标节点不在外层节点的子树中，函数返回-1。
• 若目标节点就是外层节点本身，函数返回0。
• 临时标记使用时间戳生成，几乎不会与原有HTML内容冲突。

内容的提问来源于stack exchange，提问作者Nor.Z