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

【问题标题】：seemore/hide post with markdown content查看更多/隐藏带有降价内容的帖子
【发布时间】：2021-03-26 15:06:04
【问题描述】：

我的 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：blah blah some (and very long text) textblah blah

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

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

我的期望：blah blah some (and very long text) tex

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

【问题讨论】：

标签： reactjs markdown-it

【解决方案1】：

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

将 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>

【讨论】：

如果您将代码粘贴到控制台，示例将起作用。