如何获取单页内部文本
How can I get single page inner text?
使用 CSS3 列获取一个有点大的文本文档并使其水平滚动。这是代码演示.- http://jsfiddle.net/wojtiku/bFKpa/
我使用"document.documentElement.innerText"js代码,获取所有文档文本,但是我想获取一列文本,怎么办?
您可以获取每列的根元素以及该元素的innerText
。
var elements = document.getElementById("container").getElementsByTagName("p");
for(var i = 0; i < elements.length; ++i) {
console.log("COLUMN " + i + "'n");
console.log(elements[i].innerText);
};
小提琴:http://jsfiddle.net/4mHCb/3/
您可以打开浏览器的 JS 控制台并查看输出(chrome 中的 ctrl+shift+j(。
编辑
感谢voithos指出我忽略了什么。 考虑到他说的话,我很确定没有办法准确地做到这一点。 但是,这是一个全面的黑客,它近似于您正在寻找的内容。 它使用屏幕外画布和 2D 上下文的 mesaureText 方法:http://jsfiddle.net/4mHCb/5/
var elements = document.getElementById("container").getElementsByTagName("p");
var g2d = document.createElement("canvas").getContext("2d");
var containerStyle = document.getElementById("container").style;
var columnWidth = 150;
var lineHeight = 18;
var columnHeight = 300;
var linesPerCol = columnHeight / lineHeight;
var results = [];
for(var i = 0; i < elements.length; ++i) {
var colText = elements[i].innerText;
var textWidth = g2d.measureText(colText).width;
var numCols = textWidth / (columnWidth * linesPerCol);
var charIdx = 0;
for (var column = 0; column < numCols; ++column) {
var currString = "";
var currTextWidth = 0;
for (; charIdx < colText.length && currTextWidth < columnWidth*linesPerCol; ++charIdx) {
currString += colText[charIdx];
currTextWidth = g2d.measureText(currString).width;
}
results.push(currString);
}
}
for(var column = 0; column < results.length; ++column) {
console.log("COLUMN: " + column);
console.log(results[column]);
}
我不确定,这就是你想要得到的。
var childElement= document.getElementById("container").getElementsByTagName("p");
for(var i=0;i<childElement.length;i++)
{
alert(childElement[i].innerHTML);
}
上面的代码片段返回 para 标签的集合,您可以循环访问并获取 html 内容。
没有简单的方法可以做到这一点。这些列不作为单独的 DOM 元素存在,不超过文本行。
您也许可以查找分栏符(例如,通过在文本中插入一堆零大小的内联元素并查看它们的位置(,但这将是一个混乱且容易出错的过程。
相关文章:
- 带有url的单页网站导航
- 如何照顾CSRF&单页应用程序中不使用cookie的XSS攻击
- 遗漏中间部分的单页点导航
- 获取中继器控件ASP.Net中显示的单击项目文本框
- WordPress驱动的单页应用程序,具有通用JavaScript
- Backbone.js和PhoneGap,单页或多页
- Jquery手机单页app+视频+动态变化视频
- jQuery/Javascript>on单击将文本放置在最后一个已知的光标位置
- 在非SPA(单页应用程序)中使用Require.js和Backbone
- 单页应用程序的javascript集成测试
- 如何在单页应用程序中重新绘制图像
- 点击后去掉表单上的文本区域
- 如何计算angular JS应用程序(单页应用程序)的页面加载时间
- Dojo:在单页应用程序中交换两个不同的视图
- AngularJS单页应用程序中的Toggable选项卡
- $index ng 单击内不打印数字
- Umbraco 将从第 @nodename 页添加链接作为表单上的文本输入值
- 如何获取单页内部文本
- ng单击在文本框内的跨度中未触发
- 为php表单动态生成文本框,将它们放入数组,内爆为字符串,并将字符串写入数据库