Question

是否有一个聪明的jQuery选择器用于选择这样的文本节点：

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

我想从上面的标记中获取三并将其包装在这样的强标记中：

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

Answer 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处包含'one'，在索引1处包含'three'。就像Keith Rousseau所说，你不能真正抓住那个文本，但如果你知道它将是最后一个你可以获得它是这样的：

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

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

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

This问题描述了使用jQuery选择文本节点（我的第一个代码片段）。

Answer 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);

Answer 3

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

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

Answer 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');
});

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

Answer 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>'));

Answer 6

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

它可能无法完全满足您的需求，但源代码包含使用文本节点并有效修改它们周围的DOM的良好示例。

Answer 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)

Answer 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.

查找文本节点

8 个答案:

CSS无法选择文本节点