从body获取所有文本并根据标记进行拆分

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

要实现所需，您可以使用递归函数遍历给定容器中的所有元素，并从其文本节点中检索值。

与所需输出的唯一不一致是空节点，上面的示例包括一些，但不是全部。您需要实现一些逻辑来确定要删除哪些逻辑以及要保留哪些逻辑。正如你所说，这是出于翻译的目的，我建议将它们全部折扣，因为没有什么可以翻译的。尽管如此，试试这个：

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>

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

我有个主意。如果我们使用正则表达式怎么办？我为此准备了一个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 4

在这里，你可以得到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>