时间戳

首页 > 解决方案 > 当句子中的每个单词都包含在 div 标签中时，有没有办法选择和突出显示句子？

javascript - 当句子中的每个单词都包含在 div 标签中时，有没有办法选择和突出显示句子？

问题描述

我正在构建一个反应应用程序，因为我需要从原始 html 中选择和突出显示多行句子（连续）或多个连续单词。像这样

在此处输入图像描述

我想要选择和突出显示的方式，

我已经尝试了一些解决方案，但它不起作用。

代码片段中也附有相同的内容。变量“anchorText”包含 html。这不是一个重复的问题，因为我已经把所有的解决方案都涂成红色并尝试了所有这些。这是新事物。

This code is for reference only. May not work when you run here..

import React, { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
const Reference = (props) => {  
  const [anchorText,setAnchorText] = useState(`<?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <meta content="text/html;charset=utf-8" http-equiv="content-type"/>
          <title>Treating Painful Diabetic Peripheral Neuropathy: An Update&#xd;</title>
          <style type="text/css">@font-face {font-family:"XUNQRW Minion-Italic";src:url('data:application/x-font-woff;base64,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');}
  @font-face {font-family:"XUNQRW Frutiger-Italic";src:url('data:application/x-font-woff;base64,d09GRk9UVE8AABIIAAkAAAAAGPAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA4AAADVEAAA9kSCK/nU9TLzIAAA40AAAAPAAAAE6JL4lQY21hcAAADnAAAADIAAAEUhaJG+poZWFkAAAPOAAAAC8AAAA2woCoxmhoZWEAAA9oAAAAHgAAACQIIQN+aG10eAAAD4gAAAClAAAAxGqAFJBtYXhwAAAQMAAAAAYAAAAGADFQAG5hbWUAABA4AAABuQAAAwJutPxxcG9zdAAAEfQAAAATAAAAIP90ABR4nI1WCVAUV7fuYegr64jTNOi0Tg9oBKIgqKi4gCCiiAu7xDUgoxDWADKgRgyuCAjighpccUdxQeMCvyu4+wsxCvozxggmQjTj+594mpypV+8OJq8q9apevZqarrrd9557zne+75wjY8zNGJlM5hgTNTMsfPaQoIylWYlLtBnuwVmxyYmLTJ8GSYJM6meeZ2OGE3DTH81/jGIHMEylty1k94bjfY737z1Zadq3bVJaem5G4pKELI3rIjeNl8+YMUPp08ez5zlS4x+fFqfVRORmZmlTMjXBqYvSMtLTMmKztPEeGo1/crIm3HQ2UxOuzdRmZNO3f/miSczUxGqyMmLjtSmxGUmatMWa6YmpaVm56Vr3qVp60H+KJjY1flga3UnPZy6Ny0yMT4zNSNRmejCMjP4YSxlja8b0MWN4hnFkmH5mjJMZ8xnDfC5j3GWMJ8OMkDMBFswMcyaCZeYwjBcFhTFj5Mw4JpMpZCqZy9SMmyxZdtZMMKuUy+V+coP5MPNy8x/M37AD2HHsGvYxGUhyyQHS2Su2100LG4sciyeWbpbVln9YuVr5Wl2xtrf+wvqWDWejtblk28d2vO0G27sKBaZ2b9DJXnTIob17A4+OaI8KHIsRKnQ5jHYXUKN+QZLBMhWsQKGCnP8EDxgGXuo/z0FMh/w0anhwBHtQwFiIUIFLOtgtBI16DDmOlkfRChUqzBmIHjgMTef6QYEsAr6RR2A/voOACAUs2hBqD5Y3y6qhSl4Ny3moILuaWfyOKArBXHYSBPlJBxsGzMkBMGfRnChK8/TSDb3ssgEaDPLLkMyj7T800B92NkAXDATHyE5UYbYXNmCY2rCWB3IN6mFo+/YxkQOjsRG9fHOf3VUrSvdlS/+CXoU6JQyGWu40RDgYCHzePZMdTriJGIfcJX+w+5lVlBbqpe/1MmlCl7zAQZpGdutZfFpMwO41HIFo8FeBwv3ywOCYvKwZ6nxP9nBdfcVNof6ObhyF8zEu854imu6CEXrJWk9vK5TOci3wO6zlMY1wL+GuZM0WE3QxGvl3pBpGsL+S7/SsFzFI81kcRIy9jfNzfFh43hM31OghTJ9+WHnLAGUG7i1nLz3t9uO5t7sXRm+dK+ClsdiC03BA43hQgc/P0BuGfJj02Dl4bub8hWJBMQuDapqBBTfh1JnVy6pEitNHfmyEm9uUpLpbrxvaX1+/muiv/hNgZZVhtQGmGOIM3BsuErKkPfyzJ0fuXKpPCffxTZuZpI6rDL14XeVSxAfXRF9PVHNHvXNdpqK1Cnlg59BbHKBXGwiN2ovB59VcYOsh/f1fVWCB7EUPNReJ5mgTg/1F7ugW7OBbf6pt2q0+kteeNF41dnKkX1BEzeMeP2i0NGbZG1O48iO7+NwL1/JrBbjUCi0wDQYEPach+Hhjbxzi/HjSh4e1lZcuiMWUVYMW+SGLbsIS7ZaKJJGC8ZFvvfnu3aOqOaFeYcO9omaffKI28QvOgrmScgwFSKF/gWvkpkKJVMbbMJRqWWjOUuJx+zDa6Mz/jYRQnNfUoodCffBVYJqUT/X32yRNE2eQqCE+JvnMtcbrr55/f3LJ3MlRHv4iFMMjfiLhlCtms5zhcmr8nvkCOoxCJfYZ+SDgxblzR44cFovJ4uJDOceEZvBug3CYjMPBBgNxHpXkQEzFXPDBvhAHtiC/ZXgg+pHI2WMTRwu0LNr9TrePAQI8TKBktvZGz89CRoV9s2Hbro1iecl3JTvVCvCjHAzUw0tgKAmTu6O5FqkCtvN4zETCJfCSNeYaX/EgJxSUQBZ+I6cxkP03QQ+qCFeiuF2oh1V6SNYrpfCuYEoJqJKM/EPy6HHe2CLRs8gzKUDwJDjTOIiHdMI1QuKPYPWuOfnshCNicS8u4dneB/VvVWA96gJaqXEm2W2043+h+5oadROKRJQXuacPFdwprn6FbdKeNpn0c5f8vAPEE7gI7jAeisDLGfrgRhE9yIsRfAOBhTdGoQ2G0dzb4xzRiSj2ZXfP1MnOQIn8jMP7T1IeTIvLqLy2bjOdLE3ylUvO3TN5V6Ix6tjJK7KCRghfLS3bkS3merKrD5zNr6T5v1UHjkdFRQx14iO1JXlQW1J/sruNxe8J9JU+mkxKAwqBc8qWOg0UyvN/OHEx5x3eEi4BVFIn1fJbYyf7lgD2LNCermhhcaPe4BjC7cA3xkdDpUcsfk6D1eW1Sd+3yZ50Sdou+RM4zWPU+0EQCZtpUU2FryHI+QMG4VZUYw7OUXdt4CGIpnk0+IHN7YmU+kM/wxk4EZXTWsFOrbhNU3yvDRIoejoTegbyAO6x7eRqxQo0PySexxC2i2jB5ZvrKz5En+j3ZmfL899U4IujC93UOIC0juDfkJZzWQEeTlmB4niiiPnkHci6oG+XXCrt9uH3R4dvDxOwF1pMQk7EaMg/iM6qsAXBTnPCdx+KUycNY5febMhtFWD8j2D9QYQQzC8CS9WLx4ceXjv3je7Ep8L7sU32q3RF3q2i+TBWkZwRLKQQdDR+ZGniHCnKdEmp8ClzHQZ5dxbd6EJ88SOLlhmLcAi6CiOn1f6ya9P+0oPia8mHdSH++Bubv3BFyFzVxKvYn1bmkb9TLC6bykhzyH0IbgLHZuUhAxxp4+rAXnLhD56/tfuG0FibFpC3YVXBt2JRVkaxTkA/dIzDz4a0LPj50cNTd6qoLLkVy0axr8iO1/s693RalFaWnDhAi75rzaDFs1atWKCG5VjCc3Xeq2YNHSosiK+8+Objnh9ExW3TtZKyGXJoi3Gugn8Y6L0BMIcH5Y+0X5o9qFvkjdx05DXecQ8a1dxUFHEO30a4uoqXlDiRh0/FgkwA31eU/7PAbOpP2CswNPPLJLGA3INalmpFk9dM7ev2Ki8baN3ylOZLG3mucYd2UVmUgJMHoyv6o9Mvk0A4cXLT1uNixSs2LyVuVZLgNfdmJ9g9/Qi2h6rW5J74u6u0rdbVcDndyu583p1MxRa2gDxMDT4WJGCAF47EkSJXhBYP3aB3y939j6rVFJ7A1V+vT1uXadFGym5uu1leb8GdMMpq+N8awAnk+ovT/YZEoQtaeWvvt/ZkA3ybwLnZ1MCP0dljJNTzT/fe+meL8MPpL2flbcwrWCEeRi2fMz8mb57gGXz84/aibcXbRUBSeqzk6EkV2AY9oaqf6oqj0QmngvwLsLtyZWt5HZ0wRlFyBTVDYPOq7crb0gTuTZtDB+mQglgY0DNVCGTbZfbOjv2PXgjbDq5bt03k7PY8ZbkvyzIzSrIEdFmMlqNyxLwvWLQj3/ixoKCVDzOaYXCzRO6HNCuvG+B8NdfCDZLW0SaR60XB4VofpwaZ4HEpRjPsi6Eq7GcIfK0/u+/0cYrOykh2fE7MZGSEqBl7D84Ts0ezaTdf5FcJ4NX50/v9Ii0bltIF1jgJr/PcvHfX6FQkM2GG4zxCfNRcwoQlD/8pmqQthZvyI5PiOuTVNKjrsI29t6MelGAhNFQvil5VoNuwTJyODWwHuQn72c1HN588pgIm8KpryIyMmAS1iTb1JtpQU2U6UHUpz8EWtAd77v05ag8YqYx+5VzBBdJpr3MiS51ouTBV1Xyd7BxslvfsGtGdb7IBv5gcMiECYhvMbYPcDq7O5FY9bGWfV1wDeadQe/ir2FUFy9brxCnYzP6fn25BNbvlVFnNcdWz0BtjJkQnh32hvrMs7MgsYWpoWtQSSnkutLyJHUHWLy3IXZ9r8QkP0/UUDq7xLzy40/9PRIZHLpibojZZ/a7VZDVlbfr6bAuTDqgKTMRsMk2WSTwO+dUPNBDyH6AGf9AMf4EDcNZA+vBVG9bwXXehL/R5eTHQD3uNQxun4bH3KMFvY1g2zKGGetCxP2sSfvtyXEwn3jtwlio7rPJaSvtfwha5/n9qO+DrkMUmlxIqnlGX1kR8G/FtuMVDHEhZ8b8qBuWFqWiInwg/vWmyPn+rslpSc3dMUFyDEpbT/AVF2a4Na3ZTnu97QV+W5S4vzhd6wjeBOvFv4dNW2RP/fcMTg1zqJ+XzFbHzty8QRiMTi4xI57qAlSNVYRHZMXHxO3ctVueOZVeeObaqVfgXsDXQWwRnDCh5pbpyffu56nMrVx5Sf7JImmVg1iG/LQXxdIBaiIns2rS80K9UUSdC2w9f2LRln3rnM3Z1bto6nTBXt+fU7m03Sg+IlyGNBacezWpIFbgPTshAKxYJ+bNYheuU9zq4dKmVytCdRKEp+dNXhtOJykIIS6i5tr1476YK8R40ULZG4H52beraxBQVMj/M/r39xsXaY6a6Fbp8LNtGSo5tPlyyz4L2/He+JmUoG6WlXDq4OYAZgQtUFC6mAVBn9KRany150qUCqgsN47MlD1P/b+yu52KgjwOdnLgvIV3yoBmuMXqwwBA6IpWxAwlXign0RQFJoB9pBJj6PyuqpBhaXroH6WRaqV2uxSR+XWVlwQGh42Tts4sivJf+TQcOzDAOoQdCpSGsG9Ebq+PHx2vDN/Zbtqy0ZI2oyCvvnlmO88ohp5zA0c1dW4z/Vd6r2arDGo7bS7X8fwMfklO2AAAAeJxjYGDaw/iFgZWBgamLaTcDA0MPhGa8z2DIyAQUZWBjZoABRgYkUAEEYEY1s8J/C4YoZhmGFACvowqJeJzt0stKwkEUx/HvmPUULqSVgoaKSLoqcaMYQeoDWHkDL9FF8U18ECEve9EWtcmSdj7J6TBKCK7/8V94PswwM8zwg+EAR2yGD6MzZqg7XXkmeM1AD2654JhT/AQIEiLMGRGixIiT4JwkKb1xSZoMWXLkueKaGwoUKVHW93fcU6FKjToNmrRo0+GBR5545oUuPfoimuV4hqzlR62sb+tLlvJpfVjv8qYWai6zreme8Z/RjtfNHzpd5uQ/Ulxeh+50ZXf+Ah5d8+R4nGNgZGBgAGEgiOe3+SrAyPwCxFZ/sWkujP4f/p+NxZl5EZDLxsAEUg0ACcUKqgB4nGNgZGBglvk/hyGKeQMDELCsZGBkQAWGAFuyA6gAAHicYxRjYGAEYV+GYCA+wrjo/wkgrcykzqDEpMOgD8STmHQYVwJpBiC2BmIFII4FyTMrMHgzXfr/kCmZcR/TJSZfJhsGNcbW/08YvzCoMW9g0GLmYvACyj0G8nOBemKYLjHEAWkppmSGPsY9QLOTwebrM7Yy2ADZZkC154BmaIIwcyVDN5ifDFbXAFSjDMQOQJwH5NsDzXRldmRwZfzy/xYAvJApZwAAAAAAUAAAMQAAeJxNkE1P4zAQhqfQroRAe97jHAFBiEOB5BiQ+JA4BYm73TjFoo0jO0Xq/9jfwU9k97VbRYmV8ZOZdz4yRPSbvmlCu+cv3h2P7QHNBj4kHng60szoeOBfe+VkegTX+cCTkf+ATgY+pPuBpyPNjP4MHGs+2G7rzPKj59PFGYsizy9gizTaOZe1VZrftr7Xa88v7cK6zjrZ6zphLlcrrkKu50p77b7gfXSb3iy1Y+NZcu9krdfSfbJt+NW0tt92+vJZI7F8YtnWVxZK5PuN8qY20hntk8quZdukqbiRTa6UVvM8L5TI0jt5m8laXUuhs3ftvLEti0T8/KMHstTRlhwZWtIH9djpKS3oDLeggnKciz0XlI54DiqpRr4iDX5DFY98TWvcTC/Uoo5F5S5aGWM1JYiFzBUOUzX09fFL49ZQf+21j+ANokEV/AwKSom3j1Xr2FGCP+Gz1MC+QtWCe8zUIX5Jz7C7jiU9xfwWmVdxslBz19+jl4I1iJlY08SJEmyqgjb0acENNpFiDzf4brAhFXegsJOwrwIkKIPiDvFbUJhS0TVuAV2GCu/xb0Ini0nCThMS/wGr8IwYAAAAeJxjYGYAg/+FDCIMWAAAJDABiAA=');}
  
  .page{position:relative; border:1px solid blue;margin:0.5em}
  .p,.r{position:absolute;}
  @supports(-webkit-text-stroke: 1px black) {.p{text-shadow:none !important;}}</style>
      </head>
      <body>
          <div class="page" id="page_0" style="width:558.0pt;height:756.0pt;overflow:hidden;"> 
            <div class="p" id="p3134" style="top:34.05701pt;left:36.0pt;line-height:12.442501pt;font-family:XUNQRW Frutiger-Bold;font-size:10.0pt;font-weight:bold;word-spacing:-0.003pt;letter-spacing:0.003pt;color:#161615;width:40.612953pt;">Diabetic</div>
            <div class="p" id="p3135" style="top:34.05701pt;left:79.531944pt;line-height:12.442501pt;font-family:XUNQRW Frutiger-Bold;font-size:10.0pt;font-weight:bold;word-spacing:-0.003pt;letter-spacing:0.003pt;color:#161615;width:50.23304pt;">Peripheral</div>
            <div class="p" id="p3136" style="top:34.05701pt;left:132.68399pt;line-height:12.442501pt;font-family:XUNQRW Frutiger-Bold;font-size:10.0pt;font-weight:bold;word-spacing:-0.003pt;letter-spacing:0.003pt;color:#161615;width:59.056244pt;">Neuropathy</div>
            <div class="p" id="p3137" style="top:717.8745pt;left:36.0021pt;line-height:11.849976pt;font-family:XUNQRW Frutiger-Bold;font-size:10.0pt;font-weight:bold;word-spacing:0.011pt;letter-spacing:-0.011pt;color:#161615;width:16.537003pt;">232</div>
            <div class="p" id="p3138" style="top:720.246pt;left:57.3431pt;line-height:9.103516pt;font-family:XUNQRW Minion-SemiboldItalic;font-size:8.0pt;font-weight:bold;word-spacing:0.004pt;letter-spacing:0.007pt;color:#161615;width:33.77645pt;">American</div>
            <div class="p" id="p3139" style="top:720.246pt;left:92.913055pt;line-height:9.103516pt;font-family:XUNQRW Minion-SemiboldItalic;font-size:8.0pt;font-weight:bold;word-spacing:0.004pt;letter-spacing:0.007pt;color:#161615;width:23.868011pt;">Family</div>
            <div class="p" id="p3140" style="top:720.246pt;left:118.57457pt;line-height:9.103516pt;font-family:XUNQRW Minion-SemiboldItalic;font-size:8.0pt;font-weight:bold;word-spacing:0.004pt;letter-spacing:0.007pt;color:#161615;width:33.060745pt;">Physician</div>
            <div class="p" id="p3141" style="top:720.3225pt;left:238.3061pt;line-height:9.026978pt;font-family:XUNQRW Minion-Regular;font-size:8.0pt;word-spacing:-0.031pt;letter-spacing:0.031pt;color:#161615;width:63.39299pt;">www.aafp.org/afp</div>
            <div class="p" id="p3142" style="top:720.3225pt;left:372.5986pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:25.306213pt;">Volume</div>
            <div class="p" id="p3143" style="top:720.3225pt;left:399.8853pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:10.199158pt;">94,</div>
            <div class="p" id="p3144" style="top:720.3225pt;left:412.06494pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:27.570587pt;">Number</div>
            <div class="p" id="p3145" style="top:720.3225pt;left:441.61603pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:3.994995pt;">3</div>
            <div class="p" id="p3146" style="top:721.94446pt;left:449.1786pt;line-height:3.8520508pt;font-family:XUNQRW ZapfDingbatsStd;font-size:4.0pt;color:#161615;width:3.152008pt;">◆&lt;/div>
            <div class="p" id="p3147" style="top:720.3225pt;left:454.8424pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:23.182068pt;">August</div>
            <div class="p" id="p3148" style="top:720.3225pt;left:480.00497pt;line-height:9.026978pt;font-family:XUNQRW Minion-Italic;font-size:8.0pt;font-style:italic;word-spacing:0.023pt;letter-spacing:-0.01pt;color:#161615;width:5.7545166pt;">1,</div>
            <div class="p" id="p3887" style="top:184.331pt;left:404.2199pt;line-height:8.169006pt;font-family:XUNQRW Frutiger-LightItalic;font-size:7.0pt;font-style:italic;color:#161615;width:89.88565pt;">http://www.aafp.org/afpsort.</div>
          </div>
      </body>
  </html>`);
  const [selectedAnchorText, setSelectedAnchorText] = useState("");
  
  document.onmouseup = document.onkeyup = document.onselectionchange = function() {
    if(document.getElementById("someId")){
      let selectedText = document.getElementById("anchorText").value = getSelectionText();
      //let selectedText = document.getElementById("anchorText").value;
      if(selectedText !=""){
        setSelectedAnchorText(selectedText);
      }
    }
  };

  const getSelectionText=()=> {    
    let range;
      if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        return range.htmlText;
      }
      else if (window.getSelection) {
        let selection = window.getSelection();
        if (selection.rangeCount > 0) {
          range = selection.getRangeAt(0);
          let clonedSelection = range.cloneContents();
          let div = document.createElement('div');
          div.appendChild(clonedSelection);
          return div.innerHTML;
        }
        else {
          return '';
        }
      }
      else {
        return '';
      }
}

const changeColor=()=>{
  if(selectedAnchorText){
    let replceText = "<div style='background:#bba61c' >"+selectedAnchorText+"</div>";
    let newText = anchorText.replace(selectedAnchorText,replceText);
    setAnchorText(newText);
  }
}

  return (
    <>
      <div className="modalCustomCommon custonScrollBar">
        <div className="headercon row">
            <div className="d-flex">
              <Col className="col-md-2 ReferenceAnchorTitle">
                <span>References</span>
              </Col>
            </div>
        </div>
        <p>Recent References</p>
        <div id="someId" dangerouslySetInnerHTML={{__html:anchorText}}>
        </div>
        <div className="footerButtonAnchor">
          <button
            type="button"
            className="btn btn-primary btn-lg"
            onClick={changeColor}
          >
            Change Color
          </button>
          
        </div>
      </div>
    </>
  );
};

export default Reference;

问题是当我选择一个单词然后用彩色 div 替换时，当我在同一行中选择多个单词时它没有替换。

let replceText = "<div style='background:#bba61c' >"+selectedAnchorText+"</div>"; let newText = anchorText.replace(selectedAnchorText,replceText);

提前致谢。

标签： javascriptreactjs

解决方案

推荐阅读