文档章节

使用.text()仅检索未嵌套在子标记中的文本

j
 javail
发布于 02/22 16:41
字数 492
阅读 49
收藏 0

如果我有这样的html:

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

我正在尝试使用.text()仅检索字符串“ This is some text”,但是如果我要说$('#list-item').text() ,则会得到“ This is some text” textSecond span text”。

有没有一种方法可以获取(并可能通过.text("")类的东西删除)标签中的自由文本,而不是其子标签中的文本?

HTML不是我编写的,因此这是我必须使用的。 我知道写html时只将文本包装在标签中会很简单,但是html是预先编写的。


#1楼

不是代码:

var text  =  $('#listItem').clone().children().remove().end().text();

只是为了jQuery而成为jQuery吗? 当简单的操作涉及那么多的链接命令和那么多的(不必要的)处理时,也许是时候编写jQuery扩展了:

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

致电:

var text = $('#listItem').textNotChild();

这些参数是在遇到不同情况的情况下,例如

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

文字将具有价值:

some text<break>again more.....second text<break>again more

#2楼

简单答案:

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with" 

#3楼

使用额外的条件来检查innerHTML和innerText是否相同。 仅在这种情况下,替换文本。

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/


#4楼

你可以试试这个

alert(document.getElementById('listItem').firstChild.data)

#5楼

更轻松快捷:

$("#listItem").contents().get(0).nodeValue

本文转载自:https://tl.sofbug.com/question/ERWU

j
粉丝 7
博文 1558
码字总数 0
作品 0
深圳
私信 提问
微软新作,ImageBERT虽好,千万级数据集才是亮点

雷锋网导语:本文作者提出了一种新的视觉语言预训练模型ImageBERT,该模型基于Transformer架构,并对视觉-语言联合嵌入进行建模。更为重要的是,作者还从网络上收集了一千万规模的弱监督图像...

蒋宝尚
02/03
0
0
企业微信检索引擎 - wwsearch

简介 是企业微信后台自研的全文检索引擎。它为海量用户下的全文快速检索而设计,底层支持可插拔的存储引擎。目前覆盖企业微信所有在线检索场景:企业员工通讯录、审批、日报、周报、汇报、企...

匿名
2019/11/26
1.2K
1
CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题。云南小天使的回答很好的帮助了众多...

inw3cschool
2017/05/17
0
0
XML之一(入门基础)

作为java开发,一定遇到过xml文件的传输,解析,那么现在就系统的复习一下xml技术! 首先我们来了解一下XML是个什么玩儿! XML 是可扩展标记语言(Extensible Markup Language)的缩写,其中...

monster_nian
2016/01/25
43
0
HTML常用标签以及属性 - 知乎

什么是HTML HTML基本语法 常用标签及属性 链接 文本标记 表格 列表 表单 结构标记 什么是HTML Hyper Text Markup Language,超级文本标记语言 - 普通文本a:无特殊意义,超级文本:超链接 - 超文...

饥人谷学员精选
02/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

展示如何在checkout里使用quote,quote item, address, shopping cart

展示如何更改并且在定制化的时候高效应用这些模块。 以下实体继承 \Magento\Framework\Model\AbstractExtensibleModel ,所以你可以使用第4章中讨论的可扩展属性。 Quote Quotes 是客户购物车...

忙碌的小蜜蜂
29分钟前
8
0
面向对象思想设计原则及常见设计模式

1、面向对象思想设计原则 在实际的开发中,我们要想更深入的了解面向对象思想,就必须熟悉前人总结过的面向对象的思想的设计原则 1.1、单一职责原则 高内聚,低耦合 每个类应该只有一个职责,...

庭前云落
37分钟前
25
0
fastadmin对接支付宝支付,遇到的问题之一二

一开始也没做过支付宝支付相关的东西 本来用的fastadmin的epay插件来配置支付宝的,本来以为会so easy,但是实际上还是遇到了一些问题,花了几天时间,把沙箱环境配置起来了... 算是一个良好的开...

老bia同学
38分钟前
5
0
记录一题生产者消费者问题

//有一个容器,能存储一定的产品,有put和get方法,有两个生产者,8个消费者的线程阻塞 import java.util.LinkedList; import java.util.concurrent.TimeUnit; public class Test3<T> { Lin...

南桥北木
48分钟前
13
0
线程池源码解读——回归基础

线程池源码解读——回归基础 线程池源码解读——回归基础 线程池的好处: JDK提供的创建线程池: java 中创建线程的方式: 线程池源码解读: 记录的知识点: 线程池的好处: 降低资源的开销 ...

lihua20103181
50分钟前
100
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部