吾愛破解 - LCG - LSG |安卓破解|病毒分析|huihengkj.com

 找回密碼
 注冊[Register]

QQ登錄

500彩票邀请码只需一步,快速開始

搜索
查看: 1003|回復: 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 我很贊同!

查看全部評分

發帖前要善用論壇搜索500彩票邀请码功能,那里可能會有你要找的答案或者已經有人發布過相同內容了,請勿重復發帖。

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 熱心回復!

查看全部評分

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 ( )

GMT+8, 2020-10-28 17:04

Powered by Discuz!

500彩票邀请码Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表

500彩票邀請碼-彩經網