seemore/hide post 含 markdown 内容

Question

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

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

我使用 lib mardown-it 将 markdown 字符串转换为 HTML。 Post 需要 seemore/hide 内容（例如 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

我怎样才能像 facebook 工作场所 post 一样崩溃 HTML。感谢您的帮助。

Answer 1

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

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

示例：

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>

seemore/hide post 含 markdown 内容

seemore/hide post with markdown content

reactjs

markdown-it