reactjs - 你如何在 React 中截断 html 文本?
问题描述
我正在尝试将以下 html 截断为 5 个字符:
<b>Hello</b> how are you today?
我正在寻找的结果是:
你好
但是,如何忽略截断中的 html 标签,使其不会导致以下结果?
<b>He
我正在使用一个 html 解析器,所以在使用它之后我不能截断字符串。这是我的代码,不用说,它不起作用!
import React from 'react';
import parse from 'html-react-parser';
import Typography from '@material-ui/core/Typography';
const Message= () => {
const message= "<b>Hello</b> how are you today?"
const messageParsed = parse(message);
return (
<Typography variant="body2">
{messageParsed.substr(0, 5)}
</Typography>
);
};
export default Message;
什么是正确的方法?
非常感谢,
凯蒂
解决方案
您可以使用s来保留 html 结构。Range
要获得一定长度的 html,请htmlToLength(html, length)
在下面调用。
您还可以通过调用来获取 DocumentFragment htmlToNodeWithLength(html, length)
。
该算法的核心是findRangeWithLength(range, length)
,它从末端(递归地)收缩range
,直到它具有给定的length
。
function htmlToLength(html, length) {
const trimmedNode = htmlToNodeWithLength(html, length);
const container = document.createElement("div");
container.appendChild(trimmedNode);
return container.innerHTML;
}
function htmlToNodeWithLength(html, length) {
// Only for measurement. Never added to DOM.
const container = document.createElement("div");
container.innerHTML = html;
const fullRange = document.createRange();
fullRange.setStart(container, 0);
fullRange.setEnd(container, 1);
const range = findRangeWithLength(fullRange, length);
return range.cloneContents();
}
function findRangeWithLength(range, length) {
if (rangeLength(range) < length) return range;
// Find the childNode with at least length content.
for (const childNode of range.endContainer.childNodes) {
range.setEnd(childNode, lastEndOffset(childNode));
if (rangeLength(range) >= length) {
return findRangeWithLength(range, length);
}
}
// There are no child nodes long enough. It's a text node.
const diff = length - rangeLength(range) + range.endOffset;
range.setEnd(range.endContainer, diff);
return range;
}
function lastEndOffset(node) {
return node.childNodes.length || node.textContent.length;
}
function rangeLength(range) {
return range.toString().length;
}
const html = "<p>No <span></span><b>Hello</b> <i>World</i></p>";
const length = 7;
const trimmedNode = htmlToNodeWithLength(html, length);
document.querySelector(".raw-input").textContent = html;
document.querySelector(".trimmed").appendChild(trimmedNode);
document.querySelector(".length").textContent = length;
document.querySelector(".input").innerHTML = html;
document.querySelector(".raw-output").textContent = htmlToLength(html, length);
<h2>Raw HTML input</h2>
<div class="raw-input"></div>
<h2>Rendered Input</h2>
<div class="input"></div>
<h2>Rendered output to length <span class="length">?</span></h2>
<div class="trimmed"></div>
<h2>Raw HTML output</h2>
<div class="raw-output"></div>
推荐阅读
- excel - Excel 百分比增加大于或等于
- azure-logic-apps - 用于抓取电子邮件附件的天蓝色逻辑应用程序触发缓慢
- javascript - 如何使用 v-for 动态显示带有嵌套循环的数据表
- javascript - 如何获取输入子值形式?VueJS
- reactjs - Create-React-App 无法在具有连续微调器的 Localhost 中加载
- r - 点到do.call函数的magrittr管道
- python-3.x - 在贝宝结帐菜单中隐藏“添加借记卡或信用卡”选项
- r - RStudio 环境窗格不显示 knitr 变量
- javascript - 对我的 socket.io 服务器的请求中未定义 HTTP 协议版本?
- android - ConstraintLayout - 匹配另一个视图的约束,但添加边距以使其更大