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

Posted 2023-05-07

【中文标题】JavaScript仅选择外部元素的内部html，不包括内部元素

【英文标题】：JavaScript select only inner html of outer element excluding inner element

【发布时间】：2016-08-01 00:56:16

【问题描述】：

我正在尝试获取具有像这样的内部元素的元素的内部 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>

我该如何解决这个问题？

【问题讨论】：

Strip HTML from Text JavaScript的可能重复

你也可以在这里找到***.com/questions/9727111/…

【参考方案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>

【参考方案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>

【参考方案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

【讨论】：

不，我不想要内部元素文本的“a”。我只想说“你好，你好吗”