查找文本节点答案

【问题标题】：Finding text node查找文本节点
【发布时间】：2010-02-04 23:32:46
【问题描述】：

是否有一个聪明的 jQuery 选择器可以像这样选择文本节点：

<div><input type="text">one <span>two</span> three</div>

我想从上面的标记中获取三个并将其包装在一个强标记中，如下所示：

<div><input type="text">one <span>two</span> <strong>three</strong></div>

【问题讨论】：

这甚至不是有效的标记。您需要关闭输入标签
@Keith：仅在 XHTML 中。这是完全有效的 HTML，贯穿 HTML5。
@Keith：HTML 中禁止结束输入标签：w3.org/TR/html401/interact/forms.html#h-17.4
对不起——我太习惯xhtml了，差点忘了它在html中是有效的。

标签： jquery css-selectors

【解决方案1】：

这里是如何使用 jQuery 选择文本节点：

var x = $('div') 
  .contents() 
  .filter(function() { 
    return this.nodeType == 3;
    //return this.nodeType == Node.TEXT_NODE;  this works unless using IE 7
  });

在您的示例中，x 将在索引 0 处包含“一”，在索引 1 处包含“三”。就像 Keith Rousseau 所说，您不能只抓取该文本，但如果您知道它将是最后一个，您可以获得它是这样的：

var elemThree = x[x.length-1];

你也可以像这样添加强标签：

$(x[x.length-1]).wrap("<strong></strong>");

This questions 描述了使用 jQuery 选择文本节点（我的第一个代码 sn-p）。

【讨论】：

【解决方案2】：

没有一些编程。如果你的主 DIV 有一个 ID 或类，你可以这样做：

var html = $("#my_div").html();
var array = html.split("</span>");
array[1] = "<strong>" + array[1] + "</strong>";
html = array[0] + "</span>" + array[1];

$("#my_div").html(html);

【讨论】：

警告：以上不是通用解决方案，永远不会;)

【解决方案3】：

生成标记时，是否有理由不能在某个 html 元素中包含三个？实际上不可能从文本中抓取一些随机单词并将其包装 - 除非您知道它始终是 div 中的绝对最后一个单词。如果是这样，你可以这样做来得到这个词：

var txt = $(div).text();
var txtArr = txt.split();
var wordToWrap = txtArr[txtArr.length - 1];

【讨论】：

【解决方案4】：

我不确定您是否可以使用直接的 jQuery 轻松做到这一点，除非您可以在写出该单词时将其包装在另一个标签中。您可以使用正则表达式，例如：

function wrapWithTag(tagname, element, text)
{
    var html = element.html();
    var rx = new RegExp('(' + text + ')', "gi");

    element.html(html.replace(rx, '<' + tagname + '>$1</' + tagname + '>'));
}

$(function(){
    wrapWithTag('strong', $('div'), 'three');
});

如果您尝试匹配元素内不同位置的文本，则正则表达式需要进行一些调整。

【讨论】：

正如我已经在此页面上写的 - 在 html 上使用替换是有风险的。
我同意这不是一个完美的解决方案，但这就是为什么我提到正则表达式更改可能是必要的。例如，您可以编写表达式，使其仅匹配不是在左尖括号和右尖括号 (<>) 内的文本，这将阻止任何 HTML 标记被弄乱。跨度>

【解决方案5】：

//finds most inner element that has 'three' in it
var el = $(':contains(three):last');
//actual replacement
el.html(el.html().replace('three', '<strong>three</strong>'));

【讨论】：

可能具有破坏性。想象一个单词“type”而不是“three”——然后你的代码会破坏 HTML。去过那里，做到了；）

【解决方案6】：

查看这个 jQuery 高亮插件：http://tinyurl.com/6rk6ae

它可能不完全符合您的要求，但源代码包含使用文本节点和有效修改围绕它们的 DOM 的良好示例。

【讨论】：

【解决方案7】：

CSS 无法选择文本节点

jQuery 使用仅选择元素的 css3 选择器。要获得预期的效果，您需要执行以下操作：

var div = $('find the div')[0];
var txtNode = div.lastChild
var str = document.createElement('strong')
str.appendChild(txtNode) //removes the text node from the dom.
div.appendChild(str)

【讨论】：

【解决方案8】：

如果不是关于最后一句话，而是关于 div 的纯内容，试试这个：

var chld=$('div').children().clone();
$(div).children().remove();
//now do what You want with the text, eg.
$(div).html('<strong>'+$(div).text()+'</strong>'); //or something like that :)
$(div).prepend(chld); //This is a bottleneck, cause You have to know that 
          //all the text was after all the markup, but it refers to Your example.

【讨论】：