从正文中获取所有文本并根据标签进行拆分

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>