javascript - 获取网页的前 n 个文本字符及其样式等

标签 javascript html css

我想获取网页的前 n 个字符并按照原始文档中的显示方式显示它们。

我想到在 JavaScript 中使用 textContent 来获取文本,然后以某种方式递归地获取所有没有文本的 DOM(我希望这是正确的术语)。但看来重新组合起来会非常困难。

此外,也许有一种简单的方法可以实现这一目标。那么为什么要重新发明轮子呢?

那么如何才能做到这一点呢? (我不是要求完整的代码,只是要求解决这个问题的方法。)

最佳答案

以下代码删除文档中前 35 个字符之后的所有文本。它忽略不可见的文本和完全由空格组成的文本节点。你可以看一下它的演示here :

var limit = 35;
var current = 0;

function recurse(element) {
  if (element.childNodes.length > 0) {
    for (var i = 0; i < element.childNodes.length; i++) {
      recurse(element.childNodes[i]);
    }
  }

  if (element.nodeType == Node.TEXT_NODE && element.nodeValue.trim() != '' && window.getComputedStyle(element.parentElement).height != "auto") {
    var length = element.nodeValue.length;
    if (current < limit) {
      if(current + length > limit){
        element.nodeValue = element.nodeValue.substr(0, limit - current)
      }
      current += length;
    } else {
      element.nodeValue = "";
    }
  }
}
var html = document.getElementsByTagName('html')[0];
recurse(html);

关于javascript - 获取网页的前 n 个文本字符及其样式等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14188158/

相关文章:

javascript - 选择一个表单复选框

javascript - lodash 将交替插入数组

javascript - 鼠标悬停时动画元素向下滑动

javascript - Uncaught ReferenceError : parentsCheck is not defined

html - <li> 标签中的文本在移动到下一行时位于图标下方

html - 为什么 blockquote 元素不继承父 p 的样式?

jquery - Bootstrap 主题定制

javascript - 为什么我不能在 reduce 回调的元素上使用 string.charCodeAt()

javascript - 滚动后突出显示事件的 div

javascript - 使用javascript改变背景颜色