Question

我正在创建一个应用程序，在该应用程序中，我正在翻译整个页面的文本，现在我想从页面中获取文本，

我可以简单地通过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",
  ""
]

但是我希望我的结果像

docker build -t="tibbase:1.0.0" .\tibbase\

我该如何实现？并对语法错误感到抱歉。

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);
});

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

4 个答案: