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

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

给你，你可以获得 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

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

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

Get all text from body and split based on tags

html

javascript

jquery

split

element