如何将 HTML 标记文本传递到 JS 变量中[关闭]答案

【问题标题】：How can I pass HTML tags text into a JS variable [closed]如何将 HTML 标记文本传递到 JS 变量中[关闭]
【发布时间】：2021-05-26 18:20:21
【问题描述】：

如何将所有标签文本传递到变量作业中？我尝试了以下但我不工作。

var pp = document.querySelectorAll("h1, h2, h3, p");
var i;

for (i = 0; i < pp.length; i++) {
  var job = encodeURIComponent(pp[i].innerHTML);
}

【问题讨论】：

标签还是元素？前者是文件中的文本（字符串）。后者是 DOM 节点。你追求的是哪一个？
此外，您的变量赋值会在 for 循环的每个循环中覆盖自身。这似乎没什么用。
“不起作用”是什么意思？这段代码有什么作用，与您期望它做的相比如何？如果您在 for 循环中使用 console.log(job);，您会看到什么？
var job = [] 在循环外，job.push(pp[i].innerHTML) 在循环内。这是你想要做的吗？不知道你为什么要在这里encodeURIComponent。
感谢您的回复。我在 HTML 标签之后：h1、h2、h3、p。我想将他们的 innerHTML 传递给变量 job。

【解决方案1】：

....如何将所有标签文本传递到变量作业中

您可以使用 map 来获取数组中所有元素的文本：

var pp = document.querySelectorAll("h1, h2, h3, p");
var job = Array.from(pp).map(el => el.textContent);
console.log(job);

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<p>This is paragrap</p>

【讨论】：

【解决方案2】：

您可以通过传播从查询返回的NodeList 来映射编码文本。

const jobs = [...document.querySelectorAll('h1, h2, h3, p')]
  .map(el => encodeURIComponent(el.innerHTML));

console.log(jobs);

h1, h2, h3, p { display: none; }

.as-console-wrapper { top: 0; max-height: 100% !important; }

<h1>&</h1>
<h2>#</h2>
<h3>$</h3>
<p>@</p>

【讨论】：

【解决方案3】：

使用map() 并将结果数组连接成一个字符串

var pp = document.querySelectorAll("h1, h2, h3, p");

var job = [...pp].map(elm => encodeURIComponent(elm.innerHTML)).join(' ');

console.log(job);

<h1>h1&</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>

【讨论】：