查看更多/隐藏带有降价内容的帖子

编程问答 2022-05-16

问题描述

我的 reactjs 网络应用显示提要帖子内容看起来像 Facebook Workplace。我的 post 数据 API：

post = { plainText: "some text",markdownText: "some **text**" }

我使用 lib mardown-it 将 Markdown 字符串转换为 HTML。发布需要查看更多/隐藏内容（如 facebook 工作场所）。获取折叠内容时我卡住了。

示例：

完整内容："blah blah some (and very long text) **text** blah blah"

完整内容 HTML：<p>blah blah some (and very long text) <strong>text</strong>blah blah</p>

折叠内容（从 markdownText 中剪切）："blah blah some (and very long text) **tex"

我弄错了折叠内容 HTML：<p>blah blah some (and very long text) **tex</p>

我的期望：<p>blah blah some (and very long text) <strong>tex</strong></p>

我怎样才能像 facebook 工作场所的帖子一样完全折叠 HTML。感谢您的帮助。

解决方法

您可以使用过滤内容的递归函数来解决问题。

  • 将 HTML 内容加载到 dom 元素
  • 创建一个过滤内容的新元素和递归函数
  • 应用一些过滤逻辑，例如最大允许文本大小
  • 克隆文本元素并附加到新元素
  • 您也可以在末尾添加“加载更多”按钮而不是“...”

示例：

var fullElement = document.createElement('div');
fullElement.innerHTML = '<p>blah blah some (and very long text) <strong>tex</strong> next text<strong>tex</strong></p>';
var shortElement = document.createElement('div');
var allowedSize = 40;
var currentSize = 0;
function applyNodes(element,parent){
  for (let item of element.childNodes) {
    if (item.nodeType === Node.ELEMENT_NODE) {
      var newParent = document.createElement(item.nodeName);
      parent.appendChild(newParent);
      applyNodes(item,newParent);
    } else {
      var diff = allowedSize - currentSize;
      var value = item.textContent;
      if (item.textContent.length >= diff) {
        value = value.substring(0,diff) + '...';
        parent.append(value);
        currentSize += value.length;
        return;
      } else {
        parent.append(value);
        currentSize += value.length;
      }
    }
  }
}
applyNodes(fullElement,shortElement);
console.log(shortElement.innerHTML);

输出：

<p>blah blah some (and very long text) <strong>tex</strong> ...</p>
markdown-itreactjsreactjsreactjsreactjs