使用 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>

Answer 2

如果你只想替換<b><\\b>標簽的內容，你可以這樣做：

html_element.find('b').text('My custom Text');