jjzjj

javascript - JS - surroundContents 仅在文本上保留约 20% 的高亮尝试

coder 2024-07-25 原文

我正在使用 mouseup 事件来触发一个函数，该函数突出显示文本并用跨度包围突出显示的文本(来自堆栈溢出的函数):

function highlightText(e) {

    var t = window.getSelection().toString();
    if (t) {
        $("#mySpan").remove();
        var range   = window.getSelection().getRangeAt(0);
            newNode = document.createElement("span");
        newNode.id  = 'mySpan';

        range.surroundContents(newNode);

    }
}

我遇到的主要问题是，只要包含 surroundContents，文本就会保持高亮，只有大约 20% 的高亮尝试(否则高亮会立即消失)。我尝试添加一个 setTimeout，而不是调用 1s 的 surroundContent。我也尝试删除 remove() 语句，但仍然没有用。

关于为什么会发生这种情况有什么想法吗？

最佳答案

我在 Android 上使用 Chromium 时遇到了同样的问题。在某些特定情况下，调用 range.surroundContents(newNode) 会导致页面重新加载等非常奇怪的行为。检查后the documentation of the function :

This method is nearly equivalent to newNode.appendChild(range.extractContents()); range.insertNode(newNode). After surrounding, the boundary points of the range include newNode.

所以显而易见的事情是应用另一种方式突出显示文本。我找到了 mark.js库完全按照我的要求做了，没有那种烦人的副作用。 (这里有一个 JSFiddle sample 显示了它是如何用来突出显示选择的)。不同之处在于库没有使用 range.surroundContents(newNode) 也没有使用 newNode.appendChild 而是 node.replaceChild。

基于此，这是我遇到的问题的解决方案，我认为它也适用于您的情况。

function surroundRangeWithSpan(range) {
    var span = document.createElement('span');

    // The text is within the same node (no other html elements inside of it)
    if (range.startContainer.isEqualNode(range.endContainer) && range.startContainer.childNodes.length == 0) {
      // Here you customise your <span> element
      customSurroundContents(range, span);
    } else {
      // Here you have to break the selection down
    }
    return span;
  }

  function customSurroundContents(range, span) {
    var node = range.commonAncestorContainer;
    var startNode = node.splitText(range.startOffset);
    var ret = startNode.splitText(range.toString().length);
    span.textContent = startNode.textContent;
    startNode.parentNode.replaceChild(span, startNode);
  }

然后将 window.getSelection().getRangeAt(0) 传递给函数。

关于javascript - JS - surroundContents 仅在文本上保留约 20% 的高亮尝试，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37471440/

surroundContentsjavascriptrangecodenewNodehighlighting

有关javascript - JS - surroundContents 仅在文本上保留约 20% 的高亮尝试的更多相关文章

  1. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  6. ruby-on-rails - 尝试设置 Amazon 的 S3 存储桶 : 403 Forbidden error & setting permissions - 2

    我正在关注Hartl的railstutorial.org并已到达11.4.4:Imageuploadinproduction.我做了什么:注册亚马逊网络服务在AmazonIdentityandAccessManagement中，我创建了一个用户。用户创建成功。在AmazonS3中，我创建了一个新存储桶。设置新存储桶的权限:权限:本教程指示“授予上一步创建的用户读写权限”。但是，在存储桶的“权限”下，未提及新用户名。我只能在每个人、经过身份验证的用户、日志传送、我和亚马逊似乎根据我的名字+数字创建的用户名之间进行选择。我已经通过选择经过身份验证的用户并选中了上传/删除和查看权限的框(而不

  7. arrays - Ruby:尝试在哈希数组上获取 Enumerator 时，nil:NilClass 的未定义方法 `[]' - 2

    我正在尝试循环哈希数组。当我到达获取枚举器开始循环的位置时，出现以下错误:undefinedmethod`[]'fornil:NilClass我的代码如下所示:defextraireAttributs(attributsParam)classeTrouvee=falsescanTrouve=falseownerOSTrouve=falseownerAppTrouve=falseresultat=Hash.new(0)attributs=Array(attributsParam)attributs.eachdo|attribut|#CRASHESHERE!!!typeAttribut=a

  8. ruby - 如何为 pbcopy 生成富文本链接 - 2

    我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te

  9. ruby-on-rails - 尝试为 Rails 中的用户名验证编写 REGEX - 2

    我正在尝试用Ruby(Rails)编写一个正则表达式，以便用户名的字符仅包含数字和字母(也没有空格)。我有这个正则表达式，/^[a-zA-Z0-9]+$/，但它似乎没有用，我在Rails中收到一个错误，说“The如果正则表达式使用多行anchor(^或$)，这可能会带来安全风险。您是要使用\A和\z，还是忘记添加:multiline=>true选项？"我的user.rb模型中此实现的完整代码是:classUser我做错了什么以及如何修复此正则表达式，使其仅对数字和字母有效而不对空格有效？谢谢。 最佳答案 简短回答:使用/\A[a-z

  10. ruby-on-rails - NameError(未初始化常量 Unzipper::Zip)但仅在 Heroku 部署(Rails)上 - 2

    我有一个类unzipper.rb，它使用Rubyzip解压文件。在我的本地环境中，我可以成功解压缩文件，而无需使用require'zip'明确包含依赖项但是在Heroku上，我得到一个NameError(uninitializedconstantUnzipper::Zip)我只能通过使用明确的require来解决问题:为什么这在H​​eroku环境中是必需的，但在本地主机上却不是？我的印象是Rails自动需要所有gem。app/services/unzipper.rbrequire'zip'#OnlyrequiredforHeroku.Workslocallywithout!class

随机推荐