在 Javascript 中使用 reduce 从 html 标签中提取文本

Question

我正在尝试使用 reduce 将我页面上每个段落标记的内部 HTML 连接成一个字符串。这是我的尝试：

// JS
let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce((a, b) => a + ", " + b.innerHTML));

<!-- HTML -->
<p>Apple</p>
<p>Strawberry</p>
<p>Banana</p>

这是（错误的）输出：

[object HTMLParagraphElement], Strawberry, Banana

我做错了什么？

非常感谢您的帮助！

Answer 1

您应该为 reduce 方法传递第二个参数（初始值）：

par.reduce((a,b)=>a+", "+b.innerHTML, '')

Answer 2

reduce 函数接受第二个参数，它是 accumulator.

的初始值

默认情况下，它是数组中的第一项。

要获得预期的结果，您应该这样编写代码：

let par = Array.from(document.getElementsByTagName("p"));
document.write(par.reduce((a,b)=>a+", "+b.innerHTML, ""));

这是来自 MDN 的关于 reduce 函数的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=a

Answer 3

怎么样：

let par = Array.from(document.getElementsByTagName("p"));
document.write(par.map(a=> a.innerHTML).join())

Answer 4

正如@hsz 所写，您应该使用空字符串累加器以使您的示例工作：

let par = Array.from(document.getElementsByTagName("p")); 
document.write(par.reduce(par.reduce((a,b) => a + ", " + b.innerHTML, '');

但您也可以先映射数组并获取 innerHTML 属性然后再减少

let par = Array.from(document.getElementsByTagName("p")); 
document.write(par.map(a => a.innerHTML).reduce((a, b) => a + ", " + b));

Answer 5

一个好的解决方案是使用 map 创建一个包含段落实际内容的数组。

然后使用reduce，将空字符串作为累加器（第二个参数）传递，你可以得到内容组合的字符串。

脚本：

/* Cache the p elements found. */
let pElems = document.getElementsByTagName("p");

/* Create an array containing the innerHTML of each 'p' element. */
let par = [].map.call(pElems, (a)=>a.innerHTML);

/* Use 'reduce' to combine them (passing the emoty string as the accumulator. */
document.write(par.reduce((a, b) => a + ", " + b), "");

<!-- HTML -->
<p>Apple</p>
<p>Strawberry</p>
<p>Banana</p>

一行:

document.write([].map.call(document.getElementsByTagName("p"), (a)=>a.innerHTML).reduce((a, b) => a + ", " + b), "");

<!-- HTML -->
<p>Apple</p>
<p>Strawberry</p>
<p>Banana</p>

在 Javascript 中使用 reduce 从 html 标签中提取文本

Extract text from html tags using reduce in Javascript

javascript

reduce

dom