原生JavaScript HTML注入文本的符号替换与链接自定义处理需求

看起来你已经把HTML实体转义的部分搞定了，接下来咱们来解决链接文本替换和预览切换的问题，一步步来捋清楚：

首先，核心需求有两个：一是给带< >的文本生成对应成-xxx-格式的链接，二是做一个能切换链接状态的独立函数，方便预览时调整。

我给你整理了一套实用的函数方案，完全用原生JS实现，不需要依赖任何库：

第一步：写一个统一的文本处理函数 #

这个函数专门负责把原文本拆分成「显示用文本」和「链接用文本」，同时保留原文本方便后续调整：

function processTextForGrid(text) {
  // 处理链接文本：把所有<和>直接替换成-
  const linkText = text.replace(/</g, '-').replace(/>/g, '-');
  // 处理显示文本：把<和>转成HTML实体，避免被解析成标签
  const displayText = text.replace(/</g, '&#60;').replace(/>/g, '&#62;');
  // 返回结构化数据，方便后续生成DOM或修改
  return {
    linkText,
    displayText,
    originalText: text
  };
}

第二步：实现预览时的链接切换功能 #

这个函数可以让用户点击预览网格里的元素，自由切换「带链接」和「普通文本」状态：

function toggleLink(element) {
  // 判断当前元素是链接还是普通文本
  if (element.tagName === 'A') {
    // 把链接转成普通文本
    const textNode = document.createTextNode(element.dataset.displayText);
    textNode.dataset.originalText = element.dataset.originalText;
    textNode.classList.add('preview-item');
    element.parentNode.replaceChild(textNode, element);
  } else {
    // 把普通文本转回链接
    const processedData = processTextForGrid(element.dataset.originalText);
    const link = document.createElement('a');
    // 这里可以根据你的需求自定义链接地址，比如用linkText作为标识
    link.href = `#${processedData.linkText}`;
    link.textContent = processedData.displayText;
    link.dataset.originalText = processedData.originalText;
    link.dataset.displayText = processedData.displayText;
    link.classList.add('preview-item');
    element.parentNode.replaceChild(link, element);
  }
}

第三步：给预览网格绑定点击事件 #

把切换函数绑定到预览容器上，这样所有带preview-item类的元素都能响应点击：

// 假设你的预览网格容器id是preview-grid
const previewGrid = document.getElementById('preview-grid');
previewGrid.addEventListener('click', function(e) {
  if (e.target.classList.contains('preview-item')) {
    toggleLink(e.target);
  }
});

额外说明 #

• 我用了dataset来存储原文本和显示文本，这样不管元素是链接还是普通文本，都能随时拿到原始数据进行调整，比存在全局变量里靠谱多了
• 正则表达式加了/g全局标识，确保文本里所有的<和>都会被处理，不会漏网
• 如果你实际的链接规则不是用#${linkText}，比如要跳转到特定接口或者自定义路径，直接修改toggleLink里创建a标签的href部分就行

这样一套下来，既能满足你之前的符号替换需求，又能实现预览时的链接开关功能，完全是独立可复用的模块，后续注入HTML前也能轻松调整每个元素的状态～

备注：内容来源于stack exchange，提问作者David Ruskin