如何使用纯javascript选择此文本，没有jquery

How to select this text using pure javascript, no jquery?

本文关键字：文本 没有 jquery 选择 何使用 javascript      更新时间：2023-09-26

我需要使用javascript(没有jquery(选择一些文本，我不知道该怎么做。我需要在第一个子元素之前选择 myClass 元素中的文本("Hello World"(。这里有两个例子，有时它是一个<img>标签作为第一个元素，有时它是一个<br>标签。我还需要选择<br>标签之间的文本。

<p class="myClass" style="padding: 5px;">  
    Hello World
    <img src="http://xyz.com/image.gif">                                            
    <br>
    30-12-2011 19:45
    <br>
    Testing
    <br>
</p>


<p class="myClass" style="padding: 5px;">  
    Hello World                                                                         
    <br>
    30-12-2011 19:45
    <br>
    Testing
    <br>
</p>

编辑注释：我还需要选择 myClass 中的其他文本节点。请注意，有时会有一个<img>作为子元素之一，有时不会。

所以我想结束

var a = 'Hello World'
var b = '30-12-2011 19:45'
var c = 'Testing'

有人能做到这一点吗？

不太确定你想要什么。如果要获取所有文本，请使用：

var text = element.innerText || element.textContent;

如果要分几个部分获取文本，则必须遍历所有子节点并提取文本节点：

var texts = [],
   children = element.childNodes;

for(var i = 0, len = children.length; i < len; i++) {
   var node = children[i];
   if(node.nodeType === 3) {
       var text = node.nodeValue.replace(/^'s+|'s+$/g, '');
       if(text.length > 0) {
           texts.push(text);
       }
   }
}

但是，这不会连接连续的文本节点，如果您插入新的文本节点或使用 JavaScript 拆分文本节点，则可能会发生这种情况。在这种情况下，您可以执行以下操作：

var texts = [''],
    children = element.childNodes,
    new_bucket = false,
    bucket = 0;
for(var i = 0, len = children.length; i < len; i++) {
    var node = children[i];
    if(node.nodeType === 1 && new_bucket) {
        new_bucket = false;
        texts[++bucket] = '';
    }
    else if(node.nodeType === 3) {
        var text = node.nodeValue.replace(/^'s+|'s+$/g, '');
        if(text.length > 0) {
            new_bucket = true;
            texts[bucket] += text
        }
    }
}

var elem = document.getElementsByClassname("myClass")[0],
    txtNode = elem.childNodes[0],
    txtNodeValue = txtNode.nodeValue;
console.log(txtNodeValue);

例。

我们按元素的类选择元素([0]只是告诉它选择匹配集合中的第一个元素(，然后查找它的第一个子节点。在您的情况下，这将是文本节点，因此我们要做的就是从那里获取节点值。

这将获得具有类myClass的第一个元素和该元素的第一个text node：

document.getElementsByClassName("myClass")[0].childNodes[0].nodeValue

这是一篇很棒的文章解释。

您很可能还希望trim字符串以删除空格。您可以添加以下内容以提供修剪功能：

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^'s+|'s+$/g, ''); 
  }
}

。并按以下方式使用它：

var trimmedString = document.getElementsByClassName("myClass")[0].childNodes[0].nodeValue.trim();

http://jsfiddle.net/kgdnR/1/

var abc = [].filter.call((document.getElementsByClassName("myClass")[0].childNodes), function(node) {
    if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim().length) {
        return true;
    }
    return false;
}).map(function(node) {
    return node.nodeValue.trim();
});
var a = abc[0],
    b = abc[1],
    c = abc[2];
console.log(a, b, c);

可以在IE中工作，但如果你愿意，你也可以使用jQuery。

我不知道您的示例有多规律，但您可以使用文档对象与 DOM 进行交互。

选择 myClass 元素

var elements = document.getElementsByClassName('myClass');

然后取第一个索引，它的子节点和第一个索引，它是一个文本节点

var nodes = elements[0].childNodes;
for (var i = 0; i < nodes.length; i++)
{
    var node = nodes[i],
        text;
    // loop over the nodes and see if its as textnode.  Then trim and skip empty strings
    if(node.nodeType === 3) {
        text = node.textContent.trim();
        if(text) {
            alert(text);
        }
    }
}

首先，您可以使用

document.getElementsByClassName('test')

以使用类名选择元素。选择所需的元素(它返回一个数组(，然后使用 节点值这将返回文本。

使用 XPath 表达式：

var contextNode = document.body;
var node, textNodes = [];
var search = document.evaluate('.//text()', contextNode, null, XPathResult.ANY_TYPE);
while(node = search.iterateNext()) textNodes.push(node);

按照 OP 的要求选择文本：

var my_class = document.getElementsByClassName('myClass')[0];
window.getSelection().selectAllChildren(my_class);
相关文章：