如何解决查看更多/隐藏带有降价内容的帖子
我的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。