如何使用JavaScript/HTML在HTML中选择正确的文本

x7yiwoj4  于 5个月前  发布在  Java
关注(0)|答案(1)|浏览(47)

代码作为打击显示一些内，我想选择正确的文本.但现在当鼠标按下SPAN并开始选择文本和鼠标移动到div，一个大的文本被选为图像作为打击.我可以选择正确的文本吗？
enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditional Text Selection</title>
    <style>

    .textLayer{
        position:absolute;
        inset:0;
        overflow:hidden;
        font-family:monospace !important;
        line-height:1;
        -webkit-text-size-adjust:none;
         -moz-text-size-adjust:none;
              text-size-adjust:none;
        forced-color-adjust:none;
        transform-origin:0 0;
        z-index:2;
    }

 /*   .textLayer :is(br) {
        user-select: none;
    }*/

    .textLayer :is(span, br){
        position:absolute;
        white-space:pre;
        cursor:text;
        transform-origin:center left;
        display: inline;
    }

    /* 标记选中的文本 */
    ::selection {
        background: yellow;
    }
    </style>
</head>
<body>
<div class="textLayer" data-main-rotation="0" style="width: 1200px;height: 1300px;--scale-factor: 1.96078431372549;"><span  style="left: 10.59%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.953561, 0.75);">(or, more broadly, on</span>
<span  style="left: 27.13%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 27.73%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.914235, 0.75);">mathematics</span>
<span  style="left: 37.43%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 38.22%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.962099, 0.75);" aria-owns="pdfjs_internal_id_321R">generally).</span>
<span  style="left: 46.35%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">42</span>
<span  style="left: 47.73%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 48.65%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.945475, 0.75);" aria-owns="pdfjs_internal_id_322R">To illustrate this converse, I single out five events in</span>
<br role="presentation"><span  style="left: 10.59%; top: 11.74%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912819, 0.75);">five different areas of mathematics (Figure 3), triggered or made possible by logic-based developments</span>
<br role="presentation"><span  style="left: 10.59%; top: 13.45%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.932114, 0.75);">in computer science, with each event deserving the distinction of being ‘first’ in its respective area:</span>
<br role="presentation"><span  style="left: 13.25%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912485, 0.75);">Boolean algebra</span>
<span  style="left: 27.3%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 28.22%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.970179, 0.75);">– a formal proof that every Robbins algebra is a Boolean algebra, using the</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 18%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.946777, 0.75);" aria-owns="pdfjs_internal_id_323R">automated theorem-prover EQP (1997).</span>
<span  style="left: 46.2%; top: 17.78%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">43</span>
<br role="presentation"><span  style="left: 13.25%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.929563, 0.75);">Graph theory</span>
<span  style="left: 25.08%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 25.75%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.906408, 0.75);">– a formal proof of the Four-Color Theorem using the automated interactive proof-</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 21.92%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.919253, 0.75);" aria-owns="pdfjs_internal_id_324R">assistant Coq (2008).</span>
<span  style="left: 31.51%; top: 21.7%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">44</span>
<br role="presentation"><span  style="left: 13.25%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.948306, 0.75);">Group theory</span>
<span  style="left: 25.34%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 26.24%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.94688, 0.75);">– a formal proof of the Odd-Order Theorem, also known as the Feit-Thompson</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 25.84%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.935484, 0.75);" aria-owns="pdfjs_internal_id_325R">Theorem, using the automated interactive proof-assistant Coq (2012).</span>
<span  style="left: 69.61%; top: 25.63%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">45</span>
<br role="presentation"><span  style="left: 13.26%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.909879, 0.75);">Three-dimensional geometry</span>
<span  style="left: 36.86%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
</div>
</body>
</html>

字符串
我期望：enter image description here实际结果：enter image description here

JavaScript

1条答案

按热度按时间
4urapxun

4urapxun1#

会告诉问题是PDF源/转换，你可以合并它有点像这里讨论的Reorganize PDF or HTML content for a blind user?或使用更好的转换器。
如果我只是从pdf.js复制HTML（比如在Firefox中），我可能会得到更好的输出，比如：

<html>
<head>
<meta charset="UTF-8">
</head>
<div class="textLayer" style="width: round(var(--scale-factor) * 612px, 1px); height: round(var(--scale-factor) * 792px, 1px);" data-main-rotation="0"><span style="left: 10.59%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(1.01002);" role="presentation" dir="ltr">(or, more broadly, on</span><span style="left: 27.13%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 27.73%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.95716);" role="presentation" dir="ltr">mathematics</span><span style="left: 37.43%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 38.22%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.974415);" dir="ltr" aria-owns="pdfjs_internal_id_321R">generally).</span><span style="left: 46.35%; top: 9.75%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scaleX(1.00382);" role="presentation" dir="ltr">42</span><span style="left: 47.73%; top: 9.75%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 48.65%; top: 9.95%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(1.00191);" dir="ltr" aria-owns="pdfjs_internal_id_322R">To illustrate this converse, I single out five events in</span><br role="presentation"><span style="left: 10.59%; top: 11.66%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.967885);" role="presentation" dir="ltr">
five different areas of mathematics (Figure 3), triggered or made possible by logic-based developments</span><br role="presentation"><span style="left: 10.59%; top: 13.37%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.995195);" role="presentation" dir="ltr">
in computer science, with each event deserving the distinction of being ‘first’ in its respective area:</span><br role="presentation"><span style="left: 13.25%; top: 16.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr">•</span><span style="left: 14.15%; top: 16.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 15.04%; top: 16.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.941125);" role="presentation" 
dir="ltr">Boolean algebra</span><span style="left: 27.3%; top: 16.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 28.22%; top: 16.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(1.02905);" role="presentation" dir="ltr">– a formal proof that every Robbins algebra is a Boolean algebra, using the</span><br role="presentation"><span style="left: 15.04%; top: 17.92%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.985284);" dir="ltr" aria-owns="pdfjs_internal_id_323R" class="">automated theorem-prover EQP (1997).</span><span style="left: 46.2%; top: 17.72%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scaleX(1.00382);" role="presentation" dir="ltr">43</span><br role="presentation"><span style="left: 13.25%; top: 20.13%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr">•</span><span style="left: 14.15%; top: 20.13%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 15.04%; top: 20.13%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.961381);" role="presentation" 
dir="ltr">Graph theory</span><span style="left: 25.08%; top: 20.13%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 25.75%; top: 20.13%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.983501);" role="presentation" dir="ltr">– a formal proof of the Four-Color Theorem using the automated interactive proof-</span><br role="presentation"><span style="left: 15.04%; top: 21.84%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.968603);" dir="ltr" aria-owns="pdfjs_internal_id_324R">assistant Coq (2008).</span><span style="left: 31.51%; top: 21.65%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scaleX(1.00382);" role="presentation" dir="ltr">44</span><br role="presentation"><span style="left: 13.25%; top: 24.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr">•</span><span style="left: 14.15%; top: 24.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 15.04%; top: 24.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.985783);" role="presentation" 
dir="ltr">Group theory</span><span style="left: 25.34%; top: 24.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 26.24%; top: 24.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(1.01757);" role="presentation" dir="ltr">– a formal proof of the Odd-Order Theorem, also known as the Feit-Thompson</span><br role="presentation"><span style="left: 15.04%; top: 25.77%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.988668);" dir="ltr" aria-owns="pdfjs_internal_id_325R">Theorem, using the automated interactive proof-assistant Coq (2012).</span><span style="left: 69.61%; top: 25.57%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scaleX(1.00382);" role="presentation" dir="ltr">45</span><br role="presentation"><span style="left: 13.26%; top: 27.99%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr">•</span><span style="left: 14.15%; top: 27.99%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;" role="presentation" dir="ltr"> </span><span style="left: 15.04%; top: 27.99%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scaleX(0.958323);" role="presentation" 
dir="ltr">Three-dimensional geometry</span>

字符串
选择可能正常工作。
如果我再次尝试您的代码并更改此处提到的指针事件，position: absolute似乎会更好地工作。边界添加了更好的元素方向。

div.textLayer {
  pointer-events: none;
}
span {
  border:1px solid red;
  pointer-events: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditional Text Selection</title>
    <style>

    .textLayer{
        position:absolute;
        inset:0;
        overflow:hidden;
        font-family:monospace !important;
        line-height:1;
        -webkit-text-size-adjust:none;
         -moz-text-size-adjust:none;
              text-size-adjust:none;
        forced-color-adjust:none;
        transform-origin:0 0;
        z-index:2;
    }

    .textLayer :is(span, br){
        position:absolute;
        white-space:pre;
        cursor:text;
        transform-origin:center left;
        display: inline;
    }

    /* 标记选中的文本 */
    ::selection {
        background: yellow;
    }
    </style>
</head>
<body>
<div class="textLayer" data-main-rotation="0" style="width: 1200px;height: 1300px;--scale-factor: 1.96078431372549;"><span  style="left: 10.59%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.953561, 0.75);">(or, more broadly, on</span>
<span  style="left: 27.13%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 27.73%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.914235, 0.75);">mathematics</span>
<span  style="left: 37.43%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 38.22%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.962099, 0.75);" aria-owns="pdfjs_internal_id_321R">generally).</span>
<span  style="left: 46.35%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">42</span>
<span  style="left: 47.73%; top: 9.81%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif;"> </span>
<span dir="ltr" style="left: 48.65%; top: 10.03%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.945475, 0.75);" aria-owns="pdfjs_internal_id_322R">To illustrate this converse, I single out five events in</span>
<br role="presentation"><span  style="left: 10.59%; top: 11.74%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912819, 0.75);">five different areas of mathematics (Figure 3), triggered or made possible by logic-based developments</span>
<br role="presentation"><span  style="left: 10.59%; top: 13.45%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.932114, 0.75);">in computer science, with each event deserving the distinction of being ‘first’ in its respective area:</span>
<br role="presentation"><span  style="left: 13.25%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.912485, 0.75);">Boolean algebra</span>
<span  style="left: 27.3%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 28.22%; top: 16.28%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.970179, 0.75);">– a formal proof that every Robbins algebra is a Boolean algebra, using the</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 18%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.946777, 0.75);" aria-owns="pdfjs_internal_id_323R">automated theorem-prover EQP (1997).</span>
<span  style="left: 46.2%; top: 17.78%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">43</span>
<br role="presentation"><span  style="left: 13.25%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.929563, 0.75);">Graph theory</span>
<span  style="left: 25.08%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 25.75%; top: 20.21%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.906408, 0.75);">– a formal proof of the Four-Color Theorem using the automated interactive proof-</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 21.92%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.919253, 0.75);" aria-owns="pdfjs_internal_id_324R">assistant Coq (2008).</span>
<span  style="left: 31.51%; top: 21.7%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">44</span>
<br role="presentation"><span  style="left: 13.25%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.948306, 0.75);">Group theory</span>
<span  style="left: 25.34%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 26.24%; top: 24.15%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.94688, 0.75);">– a formal proof of the Odd-Order Theorem, also known as the Feit-Thompson</span>
<br role="presentation"><span dir="ltr" style="left: 15.04%; top: 25.84%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.935484, 0.75);" aria-owns="pdfjs_internal_id_325R">Theorem, using the automated interactive proof-assistant Coq (2012).</span>
<span  style="left: 69.61%; top: 25.63%; font-size: calc(var(--scale-factor)*7.97px); font-family: sans-serif; transform: scale(0.881791, 0.75);">45</span>
<br role="presentation"><span  style="left: 13.26%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;">•</span>
<span  style="left: 14.15%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
<span  style="left: 15.04%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif; transform: scale(0.909879, 0.75);">Three-dimensional geometry</span>
<span  style="left: 36.86%; top: 28.07%; font-size: calc(var(--scale-factor)*10.91px); font-family: sans-serif;"> </span>
</div>
</body>
</html>
赞(0）分享  回复(0）举报  5个月前
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com