JQuery выберите текст

Question

<div>select this<strong>dfdfdf</strong></div>
<div><span>something</span>select this<strong>dfdfdf</strong></div>

как использовать jquery или просто javascript, чтобы выбрать значение тега div, но не включать дочерние элементы

//output
select this

Answer 1

$("div").contents().each(function(i) {
    //the function is applied on the node. 
    //therefore, the `this` keyword is the current node.
    //check if the current element is a text node, if so do something with it
});

Answer 2

Обычная версия JS:

function getDirectTextContent(element) {
    var text= [];
    for (var i= 0; i<element.childNodes.length; i++) {
        var child= element.childNodes[i];
        if (child.nodeType==3)                           // Node.TEXT_NODE
            text.push(child.data);
    }
    return text.join('');
}

Answer 3

Используя XPath, вы можете выбрать только текстовые узлы дочерних элементов div. Необработанный JavaScript ниже.

var xpr = document.evaluate("//div/text()",document,null,
    XPathResult.STRING_TYPE,
    null);
console.log(xpr.stringValue);

> select this

Если у вас есть текст с метками:

<div>select this<strong>dfdfdf</strong>and this</div>

... вы можете перебирать их (помощник преобразует XPathResult в массив)

function $x(path, context, type) {
    if (!context) context = document;
    type = type || XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE;
    var i,item,arr=[], xpr = document.evaluate(path, context, null, type, null);
    for (i=0; item=xpr.snapshotItem(i); i++) 
      arr.push(item);
    return arr;
}

var nodes = $x("//div/text()");
nodes.forEach(function(item) {
    console.log(item.textContent);
});

> select this
> and this

_{(проверено в FF, с журналом пожарных)}