0

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

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

我使用 libmardown-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>

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

4

1 回答 1

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>
于 2021-03-26T16:23:16.993 回答