如何从数组中的 textarea HTML 标记中获取数据，然后循环遍历它？

Posted 2023-05-07

【中文标题】如何从数组中的 textarea HTML 标记中获取数据，然后循环遍历它？

【英文标题】：How to get data from textarea HTML tag in an array and then loop through it?

【发布时间】：2020-03-27 08:23:15

【问题描述】：

我正在创建一个网页，该网页将从用户那里收集链接，然后只需在新标签页中打开每个链接。为了收集链接，我使用 html 的 <textarea> 标记和提交按钮。

用户应该为每一行只提供一个链接

https://google.com
https://***.com
https://facebook.com

我会通过这个函数发送每个传递每个 URL 的链接来打开链接。

function open(url) 
  var open= window.open(url, '_blank');
  open.focus();

但是究竟如何运行循环呢？如何从数组中的textarea 获取值，然后运行一个循环，将每个索引处的值发送到该函数？

如果您认为这可以做得比这更好，请随意添加您的方法。

【问题讨论】：

欢迎来到 ***！请确保添加最小可验证代码 sn-p 以供其他人查看并了解您的问题。有关如何创建minimal reproducible example的更多详细信息

我已经在JS代码中添加了该功能。 JS 代码中唯一的就是这个函数和循环。循环是我不知道该怎么做的。所以只加了这个。

并非所有评分最高的答案都是好的：***.com/a/11384018/661872 第二个使用_blank 的参数实际上是窗口的name，与目标道具无关。 window.open(url, url); 会起作用，但你不会想全部关注它们

感谢您指出这一点，但我很好奇您是如何发现我是从 SO 上评分最高的答案（快速谷歌搜索）中了解到此功能的？

这能回答你的问题吗？ How to read line by line of a text area HTML tag

【参考方案1】：

如果你给你的 textarea 一个唯一的标识符会很有帮助，这样我们就可以很容易地得到它的内容。即<textarea id="linksInput">...</textarea>

那我们就可以了

let links = document.getElementById("linksInput").value.split("\n");

我们获取 textarea 中的值并将其拆分为每个换行符（“\n”），将我们的各个链接放在一个数组中，每个元素都是原始 textarea 值的一行。现在我们可以遍历数组links。

for (let i = 0; i < links.length; i++) 
    open(links[i]);

【参考方案2】：

您可以使用以下代码获取结果。

HTML

<textarea id='links'>
</textarea>

<button id='trigger'> Get value </button>

JS

document.addEventListener('DOMContentLoaded', () =>

const ta = document.getElementById('links')
const button = document.getElementById('trigger')

button.addEventListener('click', () => 
 const list = ta.value.split('\n')
 forEach(let i=0; i < list.length; i++) 
   window.open(list[0], "_blank");
  
)
)

【参考方案3】：

您可以在文本字段中添加一个 id 并使用 javascript 来获取 TextArea 的值。

由于您正在查看由"/n" 分隔的多个值，因此您必须拆分文本并循环遍历结果。

function submitText() 
  var textVal = document.getElementById("txtarea").value;

  textVal = textVal.split('\n');

  if (textVal.length > 0) 
    for (const element of textVal) 
      console.log(element);
      window.open(element, "_blank");
    

  

<textarea id="txtarea"></textarea>

<button type="button" onclick="submitText()">Submit</button>