JavaScript - 从 HTML textarea

如何解决JavaScript - 从 HTML textarea

我想要做的是，从用户提供的 textarea 数据动态创建可点击链接，首先使用 localStorage 将其保存到本地计算机。用户数据按以下格式提供：

a|aa,c|cc,e|ee,

a,c,e 是链接的标签 aa,cc,ee 是链接本身

最终输出示例：

<a href="aa" />a</a> <a href="cc" />c</a> <a href="ee" />e</a>

第 1 步：将数据以稍后用于创建 2 个独立数组的格式保存到 localStorage。

这是我到目前为止为第 1 步所做的（不确定它是否正确）

// 去除空格和回车

textToSave = textToSave.replace(/(\r\n|\n|\r)/g,"").trim();

// 替换 |来自用户数据 =>

var textToSaveArrayFormat = textToSave.replace(/(\|)/g,"=>");

// 存储数据到localSorage

localStorage.setItem("appLinkConfig",JSON.stringify(textToSaveArrayFormat));

第 2 步：从 localStorage 检索数据并从该数据创建 2 个数组

URLLabels = ["a","b","c"];

URLOptions = ["aa","bb","cc"];

对于第 2 步，我从

// 获取本地存储应用链接配置数据

var appLinksObj = JSON.parse(localStorage.getItem("appLinkConfig")); console.log(appLinksObj);

哪个返回

a=>aa,c=>cc,e=>ee,

从这里我需要创建我的 2 个数组，这就是我卡住的地方。

第 3 步：我目前在脚本中使用硬编码数组执行此操作，但希望使用在第 1 步和第 2 步中创建的数组数据执行此操作。

// Object created
var obj = {};
  
// Using loop to insert key
// URLOptions in Object
for(var i = 0; i < URLLabels.length; i++){
    obj[URLLabels[i]] = URLOptions[i];
}

// Printing object
for (var URLLabels of Object.keys(obj)) {

    lnk.innerHTML += "<a href=\'" + URLLabels + "' target\='" + hotDeck + "'\>" + obj[URLLabels] + "</a>";

}

hotDeck 是我用来定位页面中包含的两个框架之一（返回这些框架的 ID）的标志。

在此先感谢您的帮助 - 请保持温柔，我因生病而远离编码很长时间，现在再次编码以帮助我康复。非常感谢能解决这个问题。

解决方法

我认为这就是您所期望的。在控制台上尝试代码片段，因为我无法访问代码片段中的 localStorage 属性

var input = 'a|aa,c|cc,e|ee';
var output = input.split(',').map(str => str.split('|'));
window.localStorage.setItem('appLinkConfig',JSON.stringify(output));
var config = JSON.parse(window.localStorage.getItem('appLinkConfig'));
var result = config.map(([text,href]) => `<a href="${href.trim()}">${text.trim()}</a>`).join(' ')
console.log(result);