如何使用jQuery编写实现greentext引用效果的功能模块？

1. 先定义基础样式 #

先在样式表中添加 greentext 对应的样式类：

.greentext {
  color: #789922; /* 4chan 经典绿色，可根据需求自行调整 */
  margin: 0;
  padding: 0;
}

2. 封装 jQuery 处理模块 #

你可以直接扩展 jQuery 方法，方便全局复用：

$.fn.addGreentext = function () {
  return this.each(function () {
    // 获取当前元素的原始文本内容
    const rawContent = $(this).text();
    // 兼容不同系统的换行符拆分所有行
    const lineList = rawContent.split(/\r?\n/);
    // 逐行处理
    const processedList = lineList.map(line => {
      // 正则匹配行首带>的内容，\s* 是兼容行首有空格的情况，不需要可以删掉
      if (/^\s*>/.test(line)) {
        return `<span class="greentext">${line}</span>`;
      }
      return line;
    });
    // 处理后内容替换回原节点，换行转br保证排版一致
    $(this).html(processedList.join('<br>'));
  });
};

3. 功能调用 #

帖子内容渲染完成后直接调用方法即可：

// 给所有帖子内容块的p标签应用效果，选择器可根据你的实际DOM结构调整
$('.post-content p').addGreentext();

// 如果是动态加载的帖子，新内容插入DOM后再调用一次即可
// 例：新插入的帖子DOM调用 $(newPost).find('p').addGreentext()

注意事项 #

• 如果要求严格只有行首第一个字符是>才生效，把正则里的\s*删除，修改为/^>/即可
• 如果内容允许用户输入HTML标签，建议先做XSS过滤再调用该方法，避免安全风险

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