javascript - 如何使用 Javascript 直接在 HTML 标记下提取文本

Question

我需要提取 HTML 标签下的文本。例如，如果我的 HTML 看起来像：

<span>This is Outside Text
      <span>This is Inside Text</span>
</span>

那么我需要一种方法来仅提取“这是外部文本”而不​​是“这是内部文本”。我尝试过“innerHTML”、“innerText”、“textContent”，也尝试过使用 RegEx（虽然我不太擅长）。但我找不到解决方案。任何帮助将不胜感激。

请注意，由于一些技术限制，我只需要使用“纯”Javascript而不是 jQuery（我知道这只是 Javascript，但我被禁止在此解决方案中使用它）

Answer 1

使用您的 HTML 结构，您可以尝试一下 -演示

alert ( document.querySelector( "span" ).firstChild.nodeValue );

Answer 2

您正在寻找文本子项（类型 3 的子节点）：

var children=document.getElementById("mySpan").childNodes,
    count=children.length,
    text="";

for (var i=0;i<count;i++) {
    if (children[i].nodeType==3) {
        text+=children[i].nodeValue;
    }
}

现场演示：http: //jsfiddle.net/aDgPj/

Answer 3

你可以这样做。如果您在第二个跨度之后有更多文本，它也可以工作。

 <span id="span1">This is Outside Text
  <span id="span2">This is Inside Text</span>
 </span>


var element = document.getElementById("span1");
var element2 =  document.getElementById("span2");

var text = element.textContent.replace(element2.textContent, "");

alert(text);

http://jsfiddle.net/btevfik/y58xJ/