吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

搜索
查看: 954|回复: 29
上一主题 下一主题

[已解决] 紧急求助,这个网页怎么实现复制

[复制链接]
跳转到指定楼层
楼主
zoenbo 发表于 2020-10-17 23:13 回帖奖励
本帖最后由 zoenbo 于 2020-10-18 09:10 编辑

各位大佬,这个网页,如何在网页里放段JS能让它实现可以整段以及连续多字、多行、可任意复制,并且让复制的文字和显示的一样?

[HTML] 纯文本查看 复制代码
<html>
 <head></head>
 <body>
  <div class="wraper" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px; overflow: hidden; ">
   <div class="text" style="width: 660px; height: 880px; position: absolute; left:0px; top:0px;">
    <div>
     <style type="text/css">.fs-2146a648-4 {font-size:17px; font-family:'Microsoft Yahei';  color:#28363e; position:absolute;} .fs-2146a648-a {font-size:17px; font-family:Arial;  color:#28363e; position:absolute;} .fs-2146a648-0 {font-size:26px; font-family:'Microsoft Yahei'; font-weight: 500; color:#28363e; position:absolute;} </style>
     <span class="fs-2146a648-4" style="left:147px; bottom:483px; ">。</span>
     <span class="fs-2146a648-4" style="left:148px; bottom:513px; ">东</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:649px; ">:</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:649px; ">版</span>
     <span class="fs-2146a648-4" style="left:442px; bottom:513px; ">P</span>
     <span class="fs-2146a648-a" style="left:328px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:209px; bottom:708px; ">分</span>
     <span class="fs-2146a648-4" style="left:226px; bottom:708px; ">类</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:708px; ">用</span>
     <span class="fs-2146a648-a" style="left:119px; bottom:649px; ">g</span>
     <span class="fs-2146a648-a" style="left:100px; bottom:561px; ">9</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:619px; ">江</span>
     <span class="fs-2146a648-4" style="left:321px; bottom:513px; ">公</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:590px; ">时</span>
     <span class="fs-2146a648-4" style="left:580px; bottom:513px; ">限</span>
     <span class="fs-2146a648-a" style="left:172px; bottom:561px; ">5</span>
     <span class="fs-2146a648-4" style="left:252px; bottom:513px; ">传</span>
     <span class="fs-2146a648-a" style="left:183px; bottom:708px; ">0</span>
     <span class="fs-2146a648-4" style="left:304px; bottom:513px; ">限</span>
     <span class="fs-2146a648-4" style="left:390px; bottom:513px; ">北</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:678px; ">者</span>
     <span class="fs-2146a648-4" style="left:181px; bottom:619px; ">出</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:678px; ">敏</span>
     <span class="fs-2146a648-4" style="left:192px; bottom:708px; ">词</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:513px; ">本</span>
     <span class="fs-2146a648-a" style="left:404px; bottom:435px; ">·</span>
     <span class="fs-2146a648-a" style="left:251px; bottom:435px; ">·</span>
     <span class="fs-2146a648-a" style="left:189px; bottom:590px; ">-</span>
     <span class="fs-2146a648-4" style="left:528px; bottom:513px; ">商</span>
     <span class="fs-2146a648-a" style="left:139px; bottom:649px; ">t</span>
     <span class="fs-2146a648-a" style="left:60px; bottom:561px; ">B</span>
     <span class="fs-2146a648-a" style="left:180px; bottom:590px; ">7</span>
     <span class="fs-2146a648-4" style="left:147px; bottom:619px; ">教</span>
     <span class="fs-2146a648-a" style="left:136px; bottom:561px; ">5</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:513px; ">北</span>
     <span class="fs-2146a648-a" style="left:107px; bottom:649px; ">i</span>
     <span class="fs-2146a648-a" style="left:190px; bottom:561px; ">4</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:619px; ">浙</span>
     <span class="fs-2146a648-4" style="left:494px; bottom:513px; ">电</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:619px; ">版</span>
     <span class="fs-2146a648-a" style="left:143px; bottom:649px; ">a</span>
     <span class="fs-2146a648-4" style="left:217px; bottom:513px; ">文</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:513px; ">书</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:483px; ">发</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:649px; ">排</span>
     <span class="fs-2146a648-0" style="left:45px; bottom:754px; ">版</span>
     <span class="fs-2146a648-0" style="left:123px; bottom:754px; ">息</span>
     <span class="fs-2146a648-4" style="left:338px; bottom:513px; ">司</span>
     <span class="fs-2146a648-4" style="left:311px; bottom:435px; ">有</span>
     <span class="fs-2146a648-4" style="left:546px; bottom:513px; ">务</span>
     <span class="fs-2146a648-a" style="left:194px; bottom:590px; ">0</span>
     <span class="fs-2146a648-4" style="left:183px; bottom:513px; ">大</span>
     <span class="fs-2146a648-a" style="left:166px; bottom:590px; ">-</span>
     <span class="fs-2146a648-4" style="left:407px; bottom:513px; ">京</span>
     <span class="fs-2146a648-4" style="left:131px; bottom:513px; ">新</span>
     <span class="fs-2146a648-a" style="left:118px; bottom:561px; ">8</span>
     <span class="fs-2146a648-4" style="left:269px; bottom:513px; ">播</span>
     <span class="fs-2146a648-a" style="left:400px; bottom:435px; "> </span>
     <span class="fs-2146a648-a" style="left:256px; bottom:435px; "> </span>
     <span class="fs-2146a648-a" style="left:109px; bottom:561px; ">7</span>
     <span class="fs-2146a648-4" style="left:332px; bottom:435px; ">侵</span>
     <span class="fs-2146a648-a" style="left:128px; bottom:649px; ">S</span>
     <span class="fs-2146a648-a" style="left:130px; bottom:590px; ">2</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:483px; ">与</span>
     <span class="fs-2146a648-4" style="left:366px; bottom:435px; ">必</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:590px; ">版</span>
     <span class="fs-2146a648-a" style="left:171px; bottom:590px; ">0</span>
     <span class="fs-2146a648-a" style="left:49px; bottom:561px; ">S</span>
     <span class="fs-2146a648-a" style="left:174px; bottom:708px; ">0</span>
     <span class="fs-2146a648-a" style="left:96px; bottom:649px; ">K</span>
     <span class="fs-2146a648-4" style="left:286px; bottom:513px; ">有</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:590px; ">出</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:483px; ">司</span>
     <span class="fs-2146a648-4" style="left:598px; bottom:513px; ">公</span>
     <span class="fs-2146a648-a" style="left:208px; bottom:561px; ">1</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:708px; ">:</span>
     <span class="fs-2146a648-a" style="left:409px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:294px; bottom:435px; ">所</span>
     <span class="fs-2146a648-4" style="left:356px; bottom:513px; ">授</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:708px; ">实</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:619px; ">出</span>
     <span class="fs-2146a648-4" style="left:425px; bottom:513px; ">P</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:483px; ">行</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:483px; ">制</span>
     <span class="fs-2146a648-a" style="left:157px; bottom:590px; ">7</span>
     <span class="fs-2146a648-4" style="left:413px; bottom:435px; ">—</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:483px; ">作</span>
     <span class="fs-2146a648-a" style="left:181px; bottom:561px; ">4</span>
     <span class="fs-2146a648-4" style="left:113px; bottom:590px; ">:</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:708px; ">超</span>
     <span class="fs-2146a648-4" style="left:260px; bottom:708px; ">记</span>
     <span class="fs-2146a648-4" style="left:277px; bottom:435px; ">权</span>
     <span class="fs-2146a648-a" style="left:127px; bottom:561px; ">7</span>
     <span class="fs-2146a648-4" style="left:229px; bottom:435px; ">—</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:708px; ">书</span>
     <span class="fs-2146a648-4" style="left:62px; bottom:708px; ">名</span>
     <span class="fs-2146a648-4" style="left:200px; bottom:513px; ">愚</span>
     <span class="fs-2146a648-4" style="left:349px; bottom:435px; ">权</span>
     <span class="fs-2146a648-a" style="left:45px; bottom:561px; ">I</span>
     <span class="fs-2146a648-a" style="left:165px; bottom:708px; ">0</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:513px; ">由</span>
     <span class="fs-2146a648-4" style="left:198px; bottom:619px; ">版</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:590px; ">间</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:619px; ">社</span>
     <span class="fs-2146a648-a" style="left:199px; bottom:561px; ">6</span>
     <span class="fs-2146a648-4" style="left:114px; bottom:513px; ">京</span>
     <span class="fs-2146a648-a" style="left:203px; bottom:590px; ">1</span>
     <span class="fs-2146a648-4" style="left:83px; bottom:561px; ">:</span>
     <span class="fs-2146a648-4" style="left:165px; bottom:513px; ">方</span>
     <span class="fs-2146a648-4" style="left:459px; bottom:513px; ">科</span>
     <span class="fs-2146a648-4" style="left:164px; bottom:619px; ">育</span>
     <span class="fs-2146a648-a" style="left:247px; bottom:435px; "> </span>
     <span class="fs-2146a648-4" style="left:243px; bottom:708px; ">速</span>
     <span class="fs-2146a648-0" style="left:97px; bottom:754px; ">信</span>
     <span class="fs-2146a648-a" style="left:152px; bottom:649px; ">r</span>
     <span class="fs-2146a648-4" style="left:260px; bottom:435px; ">版</span>
     <span class="fs-2146a648-4" style="left:477px; bottom:513px; ">文</span>
     <span class="fs-2146a648-a" style="left:71px; bottom:561px; ">N</span>
     <span class="fs-2146a648-a" style="left:147px; bottom:708px; ">1</span>
     <span class="fs-2146a648-a" style="left:145px; bottom:561px; ">5</span>
     <span class="fs-2146a648-a" style="left:156px; bottom:708px; ">5</span>
     <span class="fs-2146a648-a" style="left:163px; bottom:561px; ">6</span>
     <span class="fs-2146a648-4" style="left:45px; bottom:678px; ">作</span>
     <span class="fs-2146a648-4" style="left:235px; bottom:513px; ">化</span>
     <span class="fs-2146a648-0" style="left:71px; bottom:754px; ">权</span>
     <span class="fs-2146a648-a" style="left:154px; bottom:561px; ">3</span>
     <span class="fs-2146a648-4" style="left:79px; bottom:678px; ">:</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:678px; ">俞</span>
     <span class="fs-2146a648-4" style="left:215px; bottom:619px; ">社</span>
     <span class="fs-2146a648-4" style="left:563px; bottom:513px; ">有</span>
     <span class="fs-2146a648-a" style="left:110px; bottom:649px; ">n</span>
     <span class="fs-2146a648-4" style="left:383px; bottom:435px; ">究</span>
     <span class="fs-2146a648-a" style="left:139px; bottom:590px; ">0</span>
     <span class="fs-2146a648-4" style="left:96px; bottom:619px; ">:</span>
     <span class="fs-2146a648-a" style="left:148px; bottom:590px; ">1</span>
     <span class="fs-2146a648-4" style="left:130px; bottom:678px; ">洪</span>
     <span class="fs-2146a648-4" style="left:511px; bottom:513px; ">子</span>
     <span class="fs-2146a648-4" style="left:373px; bottom:513px; ">权</span>
    </div>
   </div>
  </div>
 </body>
</html>

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
翳麟 + 1 + 1 我很赞同!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

来自 17#
badyun 发表于 2020-10-18 02:23
本帖最后由 badyun 于 2020-10-18 02:24 编辑

处理好了,演示如下图。我先演示了一遍js处理之前复制到word的样子,再演示了一遍js处理后复制到word的样子



代码如下,每个地方我都加了注释

[JavaScript] 纯文本查看 复制代码
//   获取所有文字内容
let s = document.getElementsByTagName('span')

// 遍历获取每个元素的位置
let e = {}
for (let index in s) {
    let ele = s[index]
    if (ele.className && ele.className.indexOf('fs-') != -1) {
        let left = parseInt(ele.style.left.replace('px', ''))
        let bottom = parseInt(ele.style.bottom.replace('px', ''))
        let text = ele.innerText
        let className = ele.className

        // 将bottm一样的排到一个数组(因为他们是一行的)
        if (e[bottom]) {
            e[bottom].push({
                text,
                left,
                bottom,
                className
            })

            // 每行的内容排序
            e[bottom].sort((a, b) => {
                return a.left - b.left
            })
        } else {
            e[bottom] = [{
                text,
                left,
                bottom,
                className
            }]
        }
    }
}

// 对行数进行排序
let t = [];
Object.keys(e).sort().forEach(key => {
    t.unshift(e[key])
});

// 页面构造完成,插入dom
let fa = document.getElementsByClassName('text')[0].getElementsByTagName('div')[0]

// 获取到样式
let style = fa.getElementsByTagName('style')[0]

// 去除对span的定位
style.innerText = style.innerText.replace(/[\r\n]/g, "").replace(/position\: absolute\;/g, '')


// 清空父标签
fa.innerHTML = ''

// 插入样式
fa.appendChild(style)

// 开始构造页面对象
for (let index in t) {
    let eleT = t[index]
    let p = document.createElement('div')

    // 调整每行距离,让其跟原文样式保持一致
    p.style.position = 'absolute'
    p.style.bottom = eleT[0].bottom
    p.style.left = eleT[0].left

    for (let tIndex in eleT) {
        let eleS = eleT[tIndex]
        let span = document.createElement('span')
        span.innerText = eleS.text

        // 给span加上原本的class,因为class里面有对字体大小和颜色的设置
        span.className = eleS.className
        p.appendChild(span)
    }

    // 每一行插入父标签
    fa.appendChild(p)
}

// 处理好的提示,可删除
alert('success!')

免费评分

参与人数 2吾爱币 +1 热心值 +2 收起 理由
honglou + 1 + 1 收下我的膝盖大佬
NOOB玩家 + 1 热心回复!

查看全部评分

来自 20#
cube 发表于 2020-10-18 08:42
zoenbo 发表于 2020-10-18 00:17
敬爱的大佬,实在抱歉,我可能问题一开始没描述的太清楚和完整,我是想让它实现网页一打开后,就可以任意 ...
// 控制台执行以下试试吧
Array.from(document.getElementsByTagName("span")).reduce(function(arg, item) {
  let bottom = parseInt(item.style.bottom),
    left = parseInt(item.style.left)
  arg[bottom] = arg[bottom] || []
  arg[bottom][left] = item
  return arg;
}, []).reverse().forEach(item=>{
  item.filter(item=>{
    item.parentElement.before(item)
    return 1;
  })[0].before(document.createElement("p"))
})

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
zoenbo + 1 + 1 谢谢@Thanks!

查看全部评分

推荐
xifangczy 发表于 2020-10-18 02:33
用js处理太麻烦了。python简单点。。读取left和bottom的数字 利用这两个排序就能得到正确文本顺序。
python 随便写了下
[Python] 纯文本查看 复制代码
import re

html = open(r'test.html', 'r', encoding='utf-8').read()
pattern = re.compile('<span.*left:([\d]*).*bottom:([\d]*).*>([\S]*)</span>')
content = pattern.findall(html)
content.sort(key=lambda x: (-int(x[1]), int(x[0]) ), reverse = False)

newlines = content[0][1]
for str in content:
    if newlines != str[1]:
        print("\n")
        newlines = str[1]
    print(str[2] , end='')

推荐
cube 发表于 2020-10-18 00:02
[JavaScript] 纯文本查看 复制代码
//网页中随便加个按钮,事件时copy
function copy() {
  let str = Array.from(document.getElementsByTagName("span")).reduce(function(arg, item, index) {
    let bottom = parseInt(item.style.bottom),
      left = parseInt(item.style.left),
      text = item.innerText
    arg[bottom] = arg[bottom] || []
    arg[bottom][left] = text
    return arg;
  }, []).reverse().map(item => item.join('')).filter(item => !!item).join('\n')
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};
沙发
就是那个秋 发表于 2020-10-17 23:30
额 正则匹配啊
3#
crackedRSA 发表于 2020-10-17 23:31
不难 按 left 和 bottom 排序提取 就行了
4#
6767 发表于 2020-10-17 23:32
截个图 OCR一下多快速,省事,
搞爬虫另说
5#
sunpx3 发表于 2020-10-17 23:34
这个得排序吧。
6#
thepoy 发表于 2020-10-17 23:36
svg文字嘛,找到源文件和css文件,一一对应即可
7#
 楼主| zoenbo 发表于 2020-10-17 23:39 |楼主
crackedRSA 发表于 2020-10-17 23:31
不难 按 left 和 bottom 排序提取 就行了

这实在是太难了,我脑袋要爆炸了
8#
 楼主| zoenbo 发表于 2020-10-17 23:40 |楼主
thepoy 发表于 2020-10-17 23:36
svg文字嘛,找到源文件和css文件,一一对应即可

就这么一个网页,没有其他CSS文件
9#
coolcalf 发表于 2020-10-17 23:40

你仔细看下就知道,不对!
10#
 楼主| zoenbo 发表于 2020-10-17 23:40 |楼主
6767 发表于 2020-10-17 23:32
截个图 OCR一下多快速,省事,
搞爬虫另说

几百页OCR得弄到天荒地老· 痛苦啊
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止回复与主题无关非技术内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2020-10-21 13:07

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表