javascript - 使用 jQuery，如何获取通过选择的文本找到的第一个父元素？

Question

我将以下元素分配给一个变量，以及该变量的一组选择索引。

var html_element = $("<p>Some text goes <b>here</b> then continues here</p>").appendTo("body");
var start = 15;
var end = 17;

这应该代表单词“here”中的字母“her”。有什么方法可以让我使用这些索引和 html_element 来获取所选内容的第一个 HTML 元素(父元素)...？因此，在本例中，我想将“here”作为 jQuery 对象获取。

这样，如果我愿意，我可以将“此处”文本更改为“此处新”等任何内容。

简单来说，我想获取 start_index 之前的第一个元素。

Answer 1

尝试使用 :contains() 选择包含 html_element 中索引 15 到 17 处字符的元素； .text(), String.prototype.slice()

var html_element = $("<p>Some text goes <b>here</b> then continues here</p>")
                   .appendTo("body");

var start = 15;
var end = 17;
// element containing charaters at parent element text indexes 15 through 17
var selected = $(":contains(" + html_element.text().slice(15, 17) + ")"
               , html_element); // set `context` to `html_element`
// set new text at `selected`
selected.text(function(_, text) {
  return "new " + text
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

或者，.contents()、for循环使用p元素来计算文本节点的字符

var html_element = $("<p>Some text goes <b>here</b> then continues here</p>")
  .appendTo("body");

var start = 15;
var end = 17;

var text = 0;
var elem = null;
var contents = html_element.contents();

for (var index = 0; index < contents.length; index++) {
  var el = contents[index];
  if (elem === null && (el.nodeType === 3 || el.firstChild.nodeType === 3)) {
    var txt = el.textContent || el.nodeValue;
    for (var i = 0; i < txt.length; i++) {
      text += 1;
      if (text >= start + 1 && text <= end) {
        elem = $(el)
        break
      }
    };
  } else {
    break;
  }
};

console.log(elem, text, text >= start && text <= end);

elem.text(function(_, txt) {
  return "new " + txt
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>