JavaScript基于localStorage读取textarea数据动态生成可点击链接

现有代码核心问题点 #

• 存储环节无需额外将|替换为=>，徒增处理成本
• 缺少字符串拆分逻辑，无法从读取到的拼接字符串中分离标签和地址
• 链接生成逻辑完全颠倒了href值和展示文本的对应关系，同时存在引号拼接的语法错误

第一步：优化localStorage存储逻辑 #

移除不必要的分隔符替换步骤，仅做必要的格式清洗后直接存储：

// 移除所有换行符、首尾空格、末尾多余逗号
textToSave = textToSave.replace(/(\r\n|\n|\r)/g,"").trim().replace(/,$/, "");
// 直接存储清洗后的原始字符串
localStorage.setItem("appLinkConfig" ,JSON.stringify(textToSave));

若已按原有逻辑存储了带=>分隔符的内容，无需清空缓存，后续拆分逻辑可自动兼容。

第二步：读取配置并拆分目标数组 #

从localStorage读取字符串后，先按逗号分割为单组链接配置，再按分隔符拆分标签和地址：

// 读取存储的配置，无配置时返回空字符串兜底
const appLinkConfigStr = JSON.parse(localStorage.getItem("appLinkConfig")) || "";
// 初始化两个目标数组
const URLLabels = [];
const URLOptions = [];
// 按逗号分割为单组配置，过滤空项
const linkGroups = appLinkConfigStr.split(",").filter(item => item.trim());
// 遍历拆分
linkGroups.forEach(group => {
  // 自动兼容|和=>两种分隔符
  const separator = group.includes("|") ? "|" : "=>";
  const [label, url] = group.split(separator);
  // 过滤无效空项后push到对应数组
  if (label && url) {
    URLLabels.push(label.trim());
    URLOptions.push(url.trim());
  }
});

执行后即可得到符合要求的两个数组：

• URLLabels：存储所有链接展示文本，如["a", "c", "e"]
• URLOptions：存储所有链接指向地址，如["aa", "cc", "ee"]

第三步：修正链接生成逻辑 #

替换原有颠倒href和展示文本的错误逻辑，正确拼接链接：

// 拿到承载链接的容器元素（即原有代码中的lnk变量）
const lnk = document.getElementById("链接容器元素ID");
// 清空容器原有内容，避免重复拼接
lnk.innerHTML = "";
// 遍历数组生成链接
URLLabels.forEach((label, index) => {
  const targetUrl = URLOptions[index];
  // 正确对应：href为目标地址，展示文本为label，target使用预定义的hotDeck
  lnk.innerHTML += `<a href="${targetUrl}" target="${hotDeck}" style="margin: 0 10px;">${label}</a>`;
});

可根据需要调整链接的间距样式，避免链接排版拥挤。

内容的提问来源于stack exchange，提问作者user3857839