Получить весь текст из тела и разделить на основе тегов

Question

Я создаю приложение, в котором у меня есть сценарий, в котором я перевожу весь текст моей страницы, теперь я хочу получить текст со страницы,

Я могу просто получить текст с помощью $('body').text()

но в моем сценарии я хочу получить весь текст и разделить его, когда есть какой-либо конец тега

, как в примере ниже

console.log($('#test').text().split('\n'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <p>Testing p</p>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <h1>M</h1>
  <span>w</span><span>a</span><span>k</span><span>a</span>
  <p><span>new s</span></p>
  <div>a</div>
  <h6>d</h6>
</div>

мой результат будет как ниже

[
  "",
  "  Testing p",
  "  ",
  "  M",
  "  waka",
  "  new s",
  "  a",
  "  d",
  ""
]

но я хочу, чтобы мой результат был как

[
  "",
  "  Testing p",
  "  ",
  "  M",
  "  w",
  "  a",
  "  k",
  "  a",
  "  new s",
  "  a",
  "  d",
  ""
]

как я могу этого достичь?и извините за грамматические ошибки.

Answer 1

У меня есть идея. Что если бы мы использовали для этого регулярное выражение? Я подготовил для этого jsfiddle, посмотрю на него и, возможно, вы тоже сможете адаптировать его для себя.

https://jsfiddle.net/js73hb2d/

$(document).ready(function(){
  var bodyHtml = $("body").html();
  var regex = /(<[^>]+>)+(.*?)(<\/\w*>)+/g;
  var matches = regex.exec(bodyHtml);
  var splitText = [];
  while (matches != null) {
    splitText.push(matches[2]);
    matches = regex.exec(bodyHtml);
  }
  alert(splitText);
});

Answer 2

Использование children() метод

let result = $('#test')
  .children()
  .map(function() {
    return $(this).text()
  })
  .get()

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">
  <p>Testing p</p>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <h1>M</h1>
  <span>w</span><span>a</span><span>k</span><span>a</span>
  <p><span>new s</span></p>
  <div>a</div>
  <h6>d</h6>
</div>

Answer 3

Здесь вы можете получить children() и использовать для этого обратный вызов text(), например:

let arr = [];

$('#test').children().text(function(i,t){
    arr.push(t);
});

console.log(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">
  <p>Testing p</p>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <h1>M</h1>
  <span>w</span><span>a</span><span>k</span><span>a</span>
  <p><span>new s</span></p>
  <div>a</div>
  <h6>d</h6>
</div>

Другой способ - использовать для этого map() и проверить children() текущего элемента, например:

let arr = $('#test *').map(function(i, s) {
  if (!$(s).children().length)
    return $(s).text()
}).get();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <p>Testing p</p>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <h1>M</h1>
  <span>w</span><span>a</span><span>k</span><span>a</span>
  <p><span>new s</span></p>
  <div>a</div>
  <h6>d</h6>
</div>

Answer 4

Чтобы достичь того, что вам нужно, вы можете использовать рекурсивную функцию для обхода всех элементов в данном контейнере и получения значений из их текстовых узлов.

Единственное несоответствие с вашим желаемым выводом - с пустымузлы, из которых ваш пример включает в себя несколько, но не все.Вам нужно будет реализовать некоторую логику, чтобы определить, какие из них вы хотите удалить, а какие оставить.Поскольку вы заявляете, что это для целей перевода, я бы посоветовал обесценить их все, поскольку там нечего переводить.С учетом всего сказанного попробуйте это:

function getText(el, arr) {
  arr = arr || [];

  for (var i = 0; i < el.childNodes.length; i++) {
    var node = el.childNodes[i];
    if (node.nodeType === 1) 
      getText(node, arr);
    else if (node.nodeType === 3 && node.nodeValue.trim())
      arr.push(node.nodeValue);

    // version of above which includes empty nodes:
    /*
      else if (node.nodeType === 3)
        arr.push(node.nodeValue);
    */ 
  }

  return arr;
}

var textValues = getText(document.getElementById('test'));
console.log(textValues);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <p>Testing p</p>
  <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
  <h1>M</h1>
  <span>w</span><span>a</span><span>k</span><span>a</span>
  <p><span>new s</span></p>
  <div>a</div>
  <h6>d</h6>
</div>