是否有一些代码可用于通过其父对象和文本索引来定位元素及其偏移量？

Question

我的意思是，以下面的 HTML 代码为例，忽略空格。

<p>
  paragraph-text
  <span>
   span text
   <i>it</i>
  </span>
</p>

我在 pNode.innerHTML 内有 pNode 对象和“span text”中的“a”索引，这里是 23，因为 pNode.innerHTML="paragraph-textspan textit”，开放跨度标签也应该被计算在内。

是否有一些现有的库可以像transform(pElement, 23)一样使用，以便我可以获得“spanElement and 2”的预期元素和偏移量？

提前致谢。 问候，

史蒂夫

Answer 1

您也许可以通过获取 innerHTML 来实现这一点，更改您要查找的偏移量的字符，然后重新解析和比较生成的文本节点以找到更改的 数据所在的节点结束了。

例如。

function findTextFromMarkupIndex(el1, ix) {
    // make comparison element
    var el2= document.createElement(el1.tagName);
    // replace any other use of * in its HTML out of the way
    var html= el1.innerHTML.split('*').join('x');
    // insert a * at the given index in HTML
    el2.innerHTML= html.substring(0, ix)+'*'+html.substring(ix);
    // search the resulting DOM for the * and return the matching descandent from the original
    return findTextInComparison(el1, el2, '*');
}

function findTextInComparison(el1, el2, text) {
    for (var i= 0; i<el1.childNodes.length; i++) {
        var child1= el1.childNodes[i];
        var child2= el2.childNodes[i];
        if (child2.nodeType===3) { // TEXT_NODE
            var ix= child2.data.indexOf(text);
            if (ix!==-1)
                return [child1, ix];
        } else if (child2.nodeType===1) { // ELEMENT_NODE
            var result= findTextInComparison(child1, child2, text);
            if (result!==null)
                return result;
        }
    }
    return null;
}

未经测试，但对于文本内容中的字符应该可以工作。如果需要，您可以将其扩展为查看属性值内部，但不能在标记内执行索引点，例如元素或实体/字符引用。为此，您基本上需要编写一个完整的 HTML 解析器。

这听起来像是一个不寻常的要求，你到底想做什么？ innerHTML 中的索引可能非常脆弱，因为该属性的标记输出的确切格式根本没有标准化。

Answer 2

你所说的听起来像是 DOM Range ，在除 Internet Explorer 之外的所有主要浏览器中均实现。根据 HTML 中的字符偏移量指定位置并不是一个好主意，因为 innerHTML 的实现差异很大。 DOM Range 有一个开始和结束边界，每个边界都是根据节点和该节点内的偏移量指定的。在您的示例中，您可以创建一个表示位置的 Range：

var span = pNode.childNodes[1];
var spanText = span.firstChild;
var range = document.createRange();

// Next line takes into account whitespace at the start of the text node
range.setStart(spanText, 6); 

// For illustration, create a range that contains the letter "a" and selects it
range.setEnd(spanText, 7);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

一旦拥有 Range，您就可以将其用于各种用途，例如插入节点、定义用户选择以及将格式应用于 Range 封装的内容。

IE 定义了一个完全不同的对象，称为 TextRange 它具有根本不同的基于文本的方法，但具有大致相同的目的。要获得与上一个示例等效的 TextRange，您可以使用以下命令：

var textRange = document.body.createTextRange();
textRange.moveToElementText(pNode);
textRange.moveStart("character", 17);
textRange.collapse();

// For illustration, create a range that contains the letter "a" and selects it
textRange.moveEnd("character", 1);
textRange.select();