Question

拥有这样的代码：

<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>

可以使用以下代码获取内部HTML：

document.querySelector('div#myid').innerText

有没有办法分开哪个让我们用逗号表示每个标签的文字？

预期产出：

My Title,Text 1,test text 3,An example final text

Answer 1

不直接使用innerText。您需要做的是递归遍历HTML，直到您到达只有文本的最后一个叶子，然后返回每个叶子。

＆＃13;

const root = document.querySelector('#myid');

const getTexts = (el, chunks = []) => {
  if (el.nodeType === document.TEXT_NODE) {
    return chunks.concat(el.data);
  } else if (el.childNodes.length > 0) {
    return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
  }
  
  return chunks;
}

console.log(getTexts(root));

＆＃13;

<div id="root">
  <div id="myid">
      <div class="test">
          <h3 class="h3_class">My Title</h3>
          <p class="class_1_p">Text 1</p>
          <p class="Sans-19px">
              test text 3
          </p>
      </div>
  </div>
  <div class="test_light">
      <blockquote class="test_text_final">
          An example final text
      </blockquote>
  </div>
</div>

＆＃13;

正如您所注意到的，此功能还包括换行符（\n）和空格，您可以根据需要进行过滤。

该功能基本上遍历每个节点。如果它是TextNode，它会读取文本并将其添加到块中。如果不是，但有孩子，那么它将通过每个孩子递归。如果它不是，它只返回现有的块。

＆＃13;

const root = document.querySelector('#root');

const getTexts = (el, chunks = []) => {
  if (el.nodeType === document.TEXT_NODE) {
    return chunks.concat(el.data);
  } else if (el.childNodes.length > 0) {
    return Array.prototype.reduce.call(el.childNodes, (result, child) => getTexts(child, result), chunks);
  }
  
  return chunks;
}

console.log(
  getTexts(root).map(s => s.trim()).filter(Boolean)
);

＆＃13;

<div id="root">
  <div id="myid">
      <div class="test">
          <h3 class="h3_class">My Title</h3>
          <p class="class_1_p">Text 1</p>
          <p class="Sans-19px">
              test text 3
          </p>
      </div>
  </div>
  <div class="test_light">
      <blockquote class="test_text_final">
          An example final text
      </blockquote>
  </div>
</div>

＆＃13;

Answer 2

这循环遍历#myid中的所有元素，如果文本输入大于0，它会添加到结果然后给你一个提醒，这是你想要的吗？

var result = "";

$("#myid *").each(function(index) {
  if($(this).text().length > 0) {
      result += $(this).text().replace(/(\r\n|\n|\r)/gm,"") + ",";
  }
});
alert(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>

编辑：请考虑使用Boris的解决方案。

Answer 3

这是一个VanillaJS单线解决方案：

＆＃13;

boot-module

＆＃13;

var text = document.querySelector('div#myid').innerText;

console.log(text.split('\n').filter(x => x).join(', '));

＆＃13;

Answer 4

这个抓住了给定选择器内的所有内容。

console.log(document.getElementById("myid").innerText.replace(/\s{2,}/g,', '));

<div id="myid">
    <div class="test">
        <h3 class="h3_class">My Title</h3>
        <p class="class_1_p">Text 1</p>
        <p class="Sans-19px">
            test text 3
        </p>
    </div>
    </a>
</div>
<div class="test_light">
    <blockquote class="test_text_final">
        An example final text
    </blockquote>
</div>
</div>

分离多个标签的innerHTML

4 个答案: