代码之家 › 专栏 › 技术社区 › David Hellsing

查找文本节点

css-selectors jquery

David Hellsing · 技术社区 · 14 年前

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

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

我想买三从上面的标记中,将其包装成这样的强标记:

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

8 回复 | 直到 14 年前

Community omersem 7 年前

以下是如何使用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”。正如基思·卢梭所说,你不能仅仅抓住文本,但如果你知道它将是最后一个,你可以这样得到:

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

您还可以像这样添加强标记:

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

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

tambler 14 年前

不需要一些编程。如果您的主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);

Keith Rousseau 14 年前

在生成标记时,为什么不能在某些HTML元素中包装三个元素?从文本中提取一些随机单词并将其包装是不可能的-除非您知道它将始终是DIV中的绝对最后一个单词。如果这样,您可以这样做来获取单词:

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

Mark Bell 14 年前

我不确定您是否可以用直截了当的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');
});

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

vava 14 年前

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

Pointy 14 年前

查看此jquery突出显示插件: http://tinyurl.com/6rk6ae

它可能不能完全满足您的需要,但是源代码包含了使用文本节点和有效地修改它们周围的DOM的好例子。

Kyle Butt 14 年前

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)

naugtur 14 年前

如果不是关于最后一个词,而是关于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.