JavaScript仅选择外部元素的内部html，不包括内部元素

Question

我正在尝试获取具有像这样的内部元素的元素的内部 html

  <span> Hello How <span>a</span> re You</span>

我只想获取 你好，你好吗，但我现在是这样的：

   Hello How <span>a</span> re You

这是我的 javascript 代码：

  <script>
 
      $(document).ready(function(){
          
         var spans = document.getElementsByTagName("span");
          for(i=0;i<spans.length;i++){
              
              
              alert(spans[i].innerHTML);
          }
          
          
      });
     
    
  </script>

我该如何解决这个问题？

Answer 1

您可以克隆element 然后删除子元素并获取内容或过滤掉内部内容

 $(document).ready(function() {

   var $spans = $("span");
   //first way
   $spans.each(function() {
     var text = $(this).clone().find('*').remove().end().text();
     snippet.log('1: ' + text)
   });

   //second way
   $spans.each(function() {
     var text = $(this).contents().filter(function() {
       return this.nodeType == Node.TEXT_NODE;
     }).text();
     snippet.log('2: ' + text)
   })



 });

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span> Hello How <span>a</span> re You</span>

Answer 2

你可以这样做

alert($("span")[0].innerHTML.replace(/<(?:.|\n)*>/gm, ''));

<span> Hello How <span>a</span> re You</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

jquery 方式。

      $(document).ready(function(){
           var spans = document.getElementsByTagName("span");
          for(i=0;i<spans.length;i++){
             alert($(spans[i]).text()); // Changed here
          }
 });

Jsfiddle using jQuery

使用 javascript

$(document).ready(function(){

         var spans = document.getElementsByTagName("span");
          for(i=0;i<spans.length;i++){
             alert(spans[i].textContent); // Using textContent
          }
 });

jsfiddle with javascript

EDIT 在 cmets 之后 如果您只查找“Hello How a re You”，您只需首先检索文本表单NodeList of span。

jquery方式

$(document).ready(function(){
 var sp = $('span');
         alert($(sp[0]).text())
 });

Jsfiddle