Question

从HTML代码下面我想获取除'text_exposed_hide'span元素之外的所有文本。

最初我试图从没有类名的span获取文本。但是这种方法错过了不在任何范围内但仅在div中的文本。

如何获取所需文字。我需要纯javascript中的这段代码

<div id="id_4f1664f84649d2c59795040" class="text_exposed_root">
9jfasiklfsa
  <span>CT:PFOUXHAOfuAI07mvPC/</span>
  <span>NAg==$1ZUlmHC15dwJX8JNEzKxNDGGT</span>
  dwL/L1ubjTndn89JL+M6z
  <span class="text_exposed_hide">...</span>
  <span class="text_exposed_show">
    <span>MDmclkBPI/</span>
    <span>s4B7R9hJyU9bE7zT10xkJ8vxIpo0quQ</span>
    55
  </span>
  <span class="text_exposed_hide">
    <span class="text_exposed_link">
      <a onclick="CSS.addClass($("id_4f1664f84649d2c59795040"), "text_exposed");">See More</a>
    </span>
  </span>
</div

编辑：

我尝试删除类名为“text_exposed_hidden”的节点，然后从剩余的节点中获取文本。下面是代码。但它不起作用控制不进入循环。甚至visibleDiv.removeChild（textExposedHideNodes [0]）也无效。我在Chrome浏览器16.0中运行此功能

    //msg is the parent node for the div
    visibleDiv = msg.getElementsByClassName("text_exposed_root");

    textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
    for(var n = 0;n < textExposedHideNodes.legth ; n++ ) { 
        console.log("Removing");
        msg.removeChild(textExposedHideNodes[n]);
    }

    return visibleDiv.innerText;

Answer 1

此代码将收集来自没有class="text_exposed_hide"父级的文本节点的所有文本，并将结果放入数组中。

它在不删除任何内容的情况下非破坏性地执行此操作：

function getTextFromChildren(parent, skipClass, results) {
    var children = parent.childNodes, item;
    var re = new RegExp("\\b" + skipClass + "\\b");
    for (var i = 0, len = children.length; i < len; i++) {
        item = children[i];
        // if text node, collect its text
        if (item.nodeType == 3) {
            results.push(item.nodeValue);
        } else if (!item.className || !item.className.match(re)) {
            // if it doesn't have a className or it doesn't match
            // what we're skipping, then recurse on it to collect from it's children
            getTextFromChildren(item, skipClass, results);
        }
    }
}

var visibleDiv = document.getElementsByClassName("text_exposed_root");
var text = [];
getTextFromChildren(visibleDiv[0], "text_exposed_hide", text);
alert(text);

如果你想要一个字符串中的所有文本，你可以将它连接在一起：

text = text.join("");

您可以在此处查看：http://jsfiddle.net/jfriend00/VynKJ/

以下是它的工作原理：

创建一个数组以将结果放入
找到我们将要开始的根
在该根目录上调用getTextFromChildren()
获取该根目录的子对象
穿过孩子们
如果找到文本节点，请将其文本收集到结果数组中
如果我们发现一个元素节点要么没有className，要么className与我们忽略的那个不匹配，那么递归调用getTextFromChildren()将该元素作为新的根来收集所有文本来自该元素

Answer 2

这是你要找的吗？

/*Get Required Text
  Desc: Return an array of the text contents of a container identified by the id param
  Params:
      id = Container DOM object id
*/
function getRequiredText(id)
{

    /*Get container, declare child var and return array*/
    var el = document.getElementById(id),
        child,
        rtn = Array();

    /*Iterate through childNodes*/
    for(var i = 0; i < el.childNodes.length; i++){

        /*Define child*/
        child = el.childNodes[i]

        /*If node isn't #text and doesn't have hidden class*/
        if(child.nodeName !="#text" && child.className != "text_exposed_hide")
            rtn.push(child.textContent);
    }

    /*Return results*/
    return rtn;
}

这将遍历所有childNodes，包括嵌套的childNodes，并将所有文本放入数组中。如果要排除嵌套子项，请将“if”语句替换为。

 if(child.nodeName !="#text" && child.className != "text_exposed_hide" && child.parentNode == el)

Answer 3

为什么不将其innertext / html设置为空字符串而不是删除节点：

//msg is the parent node for the div
visibleDiv = msg.getElementsByClassName("text_exposed_root");

textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
for(var i = 0;i < textExposedHideNodes.legth ; i++ ) { 
    //store to temp for later use
    textExposedHideNodes[i].txt = textExposedHideNodes[i].innerHTML;
    textExposedHideNodes[i].innerHTML = '';

}

return visibleDiv.innerText;

从javascript中的选择节点获取文本

3 个答案: