JavaScript - 从 HTML 文本区域中提供的用户数据创建链接

Question

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

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

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

最终 output 示例：

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

第 1 步：将数据以稍后将用于创建 2 个单独的 arrays 的格式保存到 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 个 arrays

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 arrays 这就是我卡住的地方。

第 3 步：我目前在我的脚本中使用硬编码的 arrays 执行此操作，但希望使用第 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）之一的标志。

提前感谢您的帮助 - 请温柔，由于疾病，我已经离开编码很长时间了，现在再次编码以帮助我恢复。 我将非常感谢解决这个问题。

Answer 1

我认为这是您所期望的。 尝试控制台上的代码片段，因为我无法访问代码片段中的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);