Question

我需要使用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>作为子元素之一，有时不会。{/ p>

所以我想以

结束

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

任何人都可以这样做吗？

Answer 1

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

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
        }
    }
}

Answer 2

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

Example

我们按类选择元素（[0]只是告诉它选择匹配集中的第一个元素），然后查找它的第一个子节点。在你的情况下，这将是文本节点，所以我们所要做的就是得到nodeValue。

Answer 3

这将获得第一个元素，其中包含该元素的myClass类和第一个 text node：

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

这是一个很棒的article解释。

您很可能希望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();

Answer 4

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

选择myClass元素

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

然后获取第一个索引，其childNodes和作为文本节点的第一个索引

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

Answer 5

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。

Answer 6

首先，您可以使用

document.getElementsByClassName('test')

使用类名选择元素。选择你想要的元素（它返回一个数组），然后使用的nodeValue 这将返回文本。

Answer 7

使用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);

Answer 8

根据操作员的要求选择文本：

var my_class = document.getElementsByClassName('myClass')[0];
window.getSelection().selectAllChildren(my_class);

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

8 个答案: