在元素后获取特定文本节点

Question

在元素后获取特定文本节点

4

我正在试图获取特定的字符串，“（TEXT 1）”，“（TEXT 2）”等。我无法更改HTML代码。

当我执行以下操作时：

$(this).parent().html(); // $(this) is equivalent to $('a.more').

我理解为：

<a class="more" href="/e1">Event 1</a> (TEXT 1)<br>
<a class="more" href="/e2">Event 2</a> (TEXT 2)<br>
<a class="more" href="/e3">Event 3</a> (TEXT 3)<br>

我已经尝试过这个和这个。

我似乎无法获取特定的"(TEXT n)"。理想情况下，我想要获取特定的"(TEXT n)"。大致如下：

$('a.more').nextText(1); // this would return " (TEXT 2)"

如何使用JavaScript或jQuery获取特定的字符串？

- Howard

2

也许你可以把（TEXT n）用<span>...</span>包装起来，然后搜索这些<span>。 - ViRuSTriNiTy

这个 HTML 不是我的，我无法更改它。如果这是我的 HTML，那么对我来说做这件事会非常容易。 - Howard

4个回答

2

您可以使用底层的DOMElement的nextSibling方法来获取兄弟文本节点。请尝试以下代码：

console.log($('.more')[0].nextSibling.nodeValue)); // = '(TEXT 1)'

示例代码

请注意，为了获取与其他.more元素相邻的文本节点，您可以将索引更改为1或2。

- Rory McCrossan

2

这似乎是有效的，或者我误解了你的确切问题？ https://jsfiddle.net/xhp86ygq/ 现在，如果您需要针对给定节点执行此操作的函数：

getNextTextnodeValue = function(element) {
    return element.nextSibling.nodeValue;
};

将这个内容写成 jQuery 插件只会增加代码的冗余，而且由于它不是可链接的（返回字符串而不是 jQuery 对象），你不会获得任何好处。

- Norbert

1

我的提议并不高效，但全部使用jQuery，它涉及找到一个可以减少搜索范围的小区域：

$.fn.getTextNodes = function(contentText) {
  return $(this).find(":not(iframe)").addBack().contents().filter(function() {
    return this.nodeType == 3 && this.nodeValue.indexOf(contentText) != -1;
  });
};

$(function () {
  var result = $('#areaWhereToSearch').getTextNodes('(TEXT 1)');
  if (result.length == 1) {
    $('#result').text($('#areaWhereToSearch').getTextNodes('(TEXT 1)')[0].nodeValue);
  }
});

<script src="//code.jquery.com/jquery-1.11.3.js"></script>


<div id="areaWhereToSearch">
    <a class="more" href="/e1">Event 1</a> (TEXT 1)<br>
    <a class="more" href="/e2">Event 2</a> (TEXT 2)<br>
    <a class="more" href="/e3">Event 3</a> (TEXT 3)<br>
</div>
<p id="result"></p>

- gaetanoM

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

正如您的帖子所示，如果您想创建一个自定义的.nextText()方法，只需访问DOM元素的下一个兄弟节点的nodeValue属性：

$.fn.nextText = function() {
  return this.length ? this[0].nextSibling.nodeValue : null;
};

你可以使用.eq()方法通过索引获取元素并使用自定义方法：

示例在这里

var text = $('.more').eq(0).nextText();
console.log(text); // (TEXT 1)

如果想添加一个参数来传递要检索文本的元素索引：

示例在此

$.fn.nextText = function(index) {
  return this.length ? this[index || 0].nextSibling.nodeValue : null;
};

var text = $('.more').nextText(1);
console.log(text); // (TEXT 2)

如果您想获取多个元素和文本节点，一直到特定元素（就像OP在评论中所做的那样），可以使用这个自定义的.nextTextUntil()方法： 示例在此。

$.fn.nextTextUntil = function(until) {
  var text = '', next;

  if (this.length) {
    next = this[0].nextSibling;

    while (next !== null && until && !$(next).is(until)) {
      text += next.nodeValue || next.textContent;
      next = next.nextSibling;
    }
  }

  return text;
};

使用方法：

$('.more').eq(0).nextTextUntil('.more');

Would return:

(TEXT 1 MORE TEXT)

基于以下HTML：

<a class="more" href="/e1">Event 1</a> (TEXT 1 <em>MORE TEXT</em>)