是否可以使用 DOM 属性截断摘录？ HTML/JS答案

【问题标题】：Is it possible truncate excerpt with DOM atributtes? HTML/JS是否可以使用 DOM 属性截断摘录？ HTML/JS
【发布时间】：2020-07-25 22:24:14
【问题描述】：

我尝试缩短 Wordpress REST API 的摘录，我尝试了 maxLength HTML 属性，但它不起作用。

<p
  dangerouslySetInnerHTML={{ __html: excerpt.rendered }}
  maxLength={10}
/>

有什么方法可以在 JS/React 中处理它？

提前致谢

【问题讨论】：

paragraph 没有 maxlength 属性。如果excerpt.render 是一个字符串，而您只是想使用一个子字符串，那么我就使用String.substring 方法
现在，我明白了...但我仍然没有解决方案...问题是我无法在后端进行编辑，我必须找到一种方法在前端进行.谢谢
同样，您可以从技术上获取段落中所需的任何内容，然后使用Strinb.substring 方法来缩短它。我假设它只是进入该段落的一些文本，所以这应该很容易。
我成功了。非常感谢！

【解决方案1】：

您的问题与 React 几乎没有任何关系，更多的是关于 html。

HTML 的maxlength 属性is applicable only to input and textarea tags，这样它在应用于p 标签时不会做任何事情。

HTML 本身没有与 p 类似的东西，因此需要自定义实现。你显然可以这样做：

'Long text of the article that is going to be shortened'.slice(0, 9).concat('…')

这将产生Long text…。但是，由于你使用dangerouslySetInnerHTML，我猜excerpt.rendered包含HTML标签，所以，你不能只切片它。

在这种情况下，最简单的选择是使用 2 个字符串：

如果这不是一个选项，您可以尝试解析 HTML 并仅提取文本内容（小心，它可能会产生意想不到的结果）：

const parsedExcerpt = new DOMParser().parseFromString(excerpt.rendered, 'text/html');
const excerptText = parsedExcerpt.body.innerText.trim();

现在您可以安全地使用excerptText.slice(0, 9).concat('…')（或多或少）。

【讨论】：