从特定点获取 dom 中标签的字符编号位置

Question

我有一个 div，其中包含未知数量的 html 标签或它们的深度。例如，div 内的 HTML 可以是任意数量的标签和标签的深度。

<div id="content">
    <p> Hello this is
        <ul>
            <li>**{I CLICK HERE}**A test<p> and some more</p></li>
        </ul>
        Lorem ipsum
    </p>
</div>

如果我单击 {I CLICK HERE}，我想获得的是从#content div 到所单击内容的父标记开头的字符编号位置。所以在这个例子中，我想要“li”标签的#content div中的字符数。

创建书签系统的最终目标是在数据库中保存位置后我可以返回到该位置，并且当将来重新加载此内容时，我可以包装该标签或在其上放置一个类以便能够滚动到该位置。

到目前为止，我可以抓取节点，但不确定如何获得它的位置。

$("#content").click(function(event) {
    console.log(event.target.nodeName);
});

我的想法是，一旦我获得了职位，我就将其保存到数据库中。当页面重新加载时，我将一个锚跨度标签插入该位置，然后使用它来滚动到。我将使用服务器端代码在稍后的页面加载中放置锚点。

或者，如果有更好的方法来实现能够使用 javascript 在重新加载页面时返回（scrollTo）点击点的最终结果，请告诉我。数据将保存在数据库中，并在新的页面加载时拉回。

Answer 1

解决此问题的一种方法如下：

function innerHTMLCharCountFrom(event) {

  // here we retrieve the node upon which the event,
  // for which the function was listening, was fired,
  // and retrieve its outerHTML (the HTML string of its
  // contents and both opening, and closing, tags):
  let needle = event.target.outerHTML,

    // 'this' is the node upon which the event-listener
    // was bound, and passed from EventTarget.addEventListener();
    // here we retrieve its innerHTML:
    haystack = this.innerHTML,

    // we use String.prototype.substring() to get a section
    // of the innerHTML String from the start index of 0 to
    // the index returned by String.prototype.indexOf(),
    // which is the starting position of the event.target's
    // opening tag (specifically the index of the '<' character
    // in that opening tag):
    temp = haystack.substring(0, haystack.indexOf(needle)),

    // here we create an Object to contain both the found String,
    // the innerHTML of the 'this' node until the beginning '<'
    // of the event.target node ('innerHTMLString') and the length
    // of that String of HTML ('length'):
    result = {
      'innerHTMLString': temp,
      'length': temp.length
    }

  // logging the result Object to the console:
  console.log(result);

  // returning the result Object to the calling context:
  return result;
}

// using document.querySelector() to use a CSS selector to identify
// the element upon which we wish to bind the event-listener:
document.querySelector('#content')

  // binding the 'innerHTMLCharCountFrom()' function (note the
  // deliberate lack of parentheses) as the event-handler for
  // the 'click' event:
  .addEventListener('click', innerHTMLCharCountFrom);

function innerHTMLCharCountFrom(event) {

  let needle = event.target.outerHTML,
    haystack = this.innerHTML,
    temp = haystack.substring(0, haystack.indexOf(needle)),
    result = {
      'innerHTMLString': temp,
      'length': temp.length
    }

  console.log(result);
  return result;
}
document.querySelector('#content').addEventListener('click', innerHTMLCharCountFrom);

<div id="content">
  <p> Hello this is</p>
  <ul>
    <li>**{I CLICK HERE}**A test
      <p> and some more</p>
    </li>
  </ul>
  <p>Lorem ipsum</p>
</div>

JS Fiddle demo.