Javascript:在文档中查找 URL

2024-07-01

如何在文档中查找 URL(即 www.domain.com),并将其放入锚点中: www.domain.com

html:

Hey dude, check out this link www.google.com and www.yahoo.com!

javascript:

(function(){var text = document.body.innerHTML;/*do replace regex => text*/})();

output:

Hey dude, check out this link <a href="www.google.com">www.google.com</a> and <a href="www.yahoo.com">www.yahoo.com</a>!

首先,www.domain.com不是 URL,而是主机名,并且

<a href="www.domain.com">

不会工作 — 它会寻找一个.com文件名为www.domain相对于当前页面。

在一般情况下不可能突出显示主机名,因为几乎任何东西都可以是主机名。你could尝试突出显示“www.something.dot.separated.words”,但它并不是那么可靠,并且有许多网站不使用www.主机名前缀。我会尽力避免这种情况。

/\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/;

这是一个非常自由的模式,您可以将其用作检测 HTTP URL 的起点。根据您拥有的输入类型,您可能希望缩小其允许的范围,并且可能值得检测尾随字符,例如. or !这可能是 URL 的有效部分,但实际上通常不是。

(你可以使用|允许either网址语法or the www.hostname语法,如果你喜欢的话。)

无论如何,一旦您确定了首选模式,您就需要在页面上的文本节点中找到该模式。不要运行正则表达式innerHTML markup.如果你试图标记每一个,你最终会完全毁掉这个页面。href="http://something"这已经在标记内了。当您替换时,您还将销毁任何现有的 JavaScript 引用、事件或表单字段值innerHTML内容。

一般来说,正则表达式根本无法以任何可靠的方式处理 HTML。因此,利用浏览器已经将 HTML 解析为元素和文本节点的事实,只需查看文本节点即可。您还需要避免向内看<a>元素,因为当 URL 已经在链接中时将其标记为链接是愚蠢的(并且无效)。

// Mark up `http://...` text in an element and its descendants as links.
//
function addLinks(element) {
    var urlpattern= /\bhttps?:\/\/[^\s<>"`{}|\^\[\]\\]+/g;
    findTextExceptInLinks(element, urlpattern, function(node, match) {
        node.splitText(match.index+match[0].length);
        var a= document.createElement('a');
        a.href= match[0];
        a.appendChild(node.splitText(match.index));
        node.parentNode.insertBefore(a, node.nextSibling);
    });
}

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findTextExceptInLinks(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType===Node.ELEMENT_NODE) {
            if (child.tagName.toLowerCase()!=='a')
                findTextExceptInLinks(child, pattern, callback);
        } else if (child.nodeType===Node.TEXT_NODE) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript:在文档中查找 URL 的相关文章

  • React Native 上无法识别的字体系列

    我在使用 React Native 时遇到了一个特殊的错误 在我的里面button js我在做 import Icon from react native vector icons MaterialIcons const icon Icon
  • 在 location.reload() 之后保持滚动位置

    我使用ajax 来更新所选的照片 如果成功 则刷新页面 用户可以看到所选的图像 它将有一个CSS边框 但当页面刷新时 位置又会回到顶部 我想知道重载后如何保持位置 我搜索了很多网站 仍然无法得到它 请指导我一下谢谢 EDIT 我在这里找到了
  • HTML 使用 Javascript 比较 2 个日期

    我正在尝试使用 Javascript 比较 2 个日期 如果 myDateL 位于 mydateR 之后 则单击该按钮时会显示一个消息框 我的代码有什么问题吗 我知道我见过类似的线程 但我无法理解 我希望有人能帮助我解决这个问题
  • 将元素粘贴到滚动上固定元素的底部?

    基本上 我想要实现的目标是让辅助导航在滚动时与主导航的底部相遇后立即粘在主导航的底部 我仍在学习 jQuery 并且我已经开始抓狂了 编辑 意识到我没有解释到目前为止我已经到了哪里 该类被添加到元素中 但是它没有固定在主标题下方 而是从视口
  • 文件上传:完成百分比进度条

    我正在尝试为头像上传添加 到目前为止完成的百分比 进度条巴迪出版社 https github com buddypress BuddyPress 目的是阻止用户在上传完成之前离开页面 上传过程由 BuddyPress 处理bp core a
  • 在 Javascript 中访问对象属性

    我正在尝试访问电子邮件和密码字段 但我不知道在哪里 0 来了 我正在从 rethinkdb 检索对象 它看起来不错 没有 0 但后来我使用 Lodash assign 像这样的方法 var user new User var finduse
  • 如何通过PHP获取div?

    我得到一个页面使用file get contents来自远程服务器 但我想过滤该页面并从中获取一个使用 PHP 具有 text 类的 DIV 我开始于DOMDocument但我现在迷路了 有什么帮助吗 file file get conte
  • 邪恶的 Firefox 错误——“底层对象不支持参数或操作”

    我想弄清楚这里发生了什么事 我已经研究了几个小时了 似乎无法理解为什么会发生这种情况 我正在进行一些 AJAX 调用 但仅在 Mac OS X 上的 Firefox 版本 21 中不断收到此错误 这是错误 Exception A param
  • Next.js 切换 div 标签的显示

    Code export default function Header let showMe false function toggle showMe showMe return lt gt
  • dc.js 和 crossfilter 减少了一周中每天的平均计数

    我很难正确设置我的交叉过滤器组 也许有人可以给个提示 我的数据结构看起来或多或少是这样的 datetime 2014 01 01 20 00 00 id 1 datetime 2014 01 01 22 21 08 id 2 datetim
  • 根据特殊性对一组 CSS 选择器进行排序

    如何根据 JS 函数中的 CSS 特殊性对一组 CSS 选择器进行排序 function SortByCssSpecificity input array of css selectors return sorted array of cs
  • 如何查看v8生成的机器码?

    有谁知道我如何才能看到实际的机器代码v8 http code google com p v8 从 Javascript 生成 我已经做到了Script Compile in src api cc但我不知道从那里该去哪里 我不知道如何从 C
  • 显示为问号的度unicode

    以下代码显示为问号而不是度数符号 var airF Math round Number MDTMOBILE RWISWeather i AirTemp u00B0 F tempTable find td eq 4 text airF var
  • 如何获取 Firebase ID

    有人知道如何获取 Firebase 唯一 id 吗 我试过了name name key key 什么都不起作用 我可以看到数据 但不知道如何取回 id 我需要它 Create new customers into firebase func
  • javascript 权限被拒绝访问属性

    我在从不同的 iframe 访问属性时遇到问题 我不断收到此权限被拒绝访问属性错误 我见过有人多次询问他们是否使用 file 但没有人 除了我 所以这个问题永远不会得到解决 我不会在网络上这样做 我所有帧的 src 都位于硬盘驱动器上的同一
  • 如何在单击时和用户单击离开时关闭菜单?

    我有以下代码 function document ready function clicker class click function show menu users show jQuery clicker class click fun
  • React JS:可折叠侧边栏

    我正在使用 React JS 创建响应式 UI 我想创建一个可折叠的侧边栏 如下所示 因此 当我单击垂直条 图形信息 时 它应该像第二张图片一样展开 我见过一些例子 比如Jsfiddle示例代码 https jsfiddle net 4q8
  • 如何将网页从一个域重定向到另一个域?

    当第一个域 网页 加载时 如何将域重定向到另一个域 纯 HTML 替代方案如下HTML 中的标签 The 0这里是页面在重定向之前必须保持打开状态的秒数 在这种情况下 一旦您加载页面 它就会立即发生 与建议的 JS 解决方案相反 这在禁用
  • 确定方法是同步还是异步

    在node js中 是否可以 使用函数 确定方法是同步还是异步 我想编写一个执行以下操作的函数 function isSynchonous methodName if the method is synchronous return tru
  • 确定方法是同步还是异步

    在node js中 是否可以 使用函数 确定方法是同步还是异步 我想编写一个执行以下操作的函数 function isSynchonous methodName if the method is synchronous return tru

随机推荐

  • reCaptcha 值未出现在 $_POST 中

    我正在尝试在我的网站上使用 reCaptcha 并且 recaptcha challenge field 和 recaptcha response field 没有添加到后端的 POST 数组中 但我表单中的其余变量是 有任何想法吗 我已经
  • 在 ggplot2 直方图中的图例下插入表格

    有没有办法让 grid arrange 充当 split screen 我想在图例的正下方安排一张桌子 create histogram my hist lt ggplot diamonds aes clarity fill cut geo
  • 持久子进程.Popen 会话

    我正在尝试运行一个命令 然后在同一环境中运行另一个命令 比如说 如果我在第一个命令中设置环境变量 我希望它可用于第二个命令 我试过这个 import subprocess process subprocess Popen echo test
  • 为什么不使用输出张量的最大值而不是 Softmax 函数?

    我在图像一类分类上建立了 CNN 模型 输出张量是一个包含 65 个元素的列表 我将这个张量输入到 Softmax 函数中 并得到分类结果 我认为这个输出张量中的最大值就是分类结果 为什么不使用这种方式来做分类任务呢 只是Softmax函数
  • Android模拟器相机自定义图像

    有谁知道模拟器相机启动时可以打开一些个人照片吗 我有一个基于图像分析的应用程序 我希望当我单击相机按钮时 相机会打开而不是默认的 Android 模拟器移动图像 我希望它打开一些我设置为默认图像的图像 因此 当我选择拍照时 它只会显示该图像
  • 如何同时滚动两个窗口?

    我想要同时滚动两个窗口 https superuser com a 326826 301042 但是热键输入法需要我重复多次 我的想法是使用功能热键 https autohotkey com docs Hotkeys htm Functio
  • 单击按钮通知时关闭状态栏

    单击通知按钮后如何关闭状态栏 I tried this https stackoverflow com a 15571784 1735077 但我有一个例外 java lang NoSuchMethodException collapse
  • 限制用户可以上传的文件数量

    我要上传多个文件 并希望限制每个用户只能上传 3 个文件 我的问题是我需要知道有多少个文件user数据库中已经创建了多少个文件以及当前正在上传多少个文件 可以一次上传多个文件 也可以多次上传 我尝试过很多事情 包括 创建一个验证器 http
  • 使用 jquery gmap3 和 autoFit 设置最大缩放级别

    我在 gmap3 插件上使用 autoFit 因此它可以缩放到地图上对象的最佳级别 问题是 当只有 1 个对象时 它会放大到太远的最大级别 我怎样才能使它的缩放级别不超过 14 级 Thanks 您可以使用 maxZoom 但这设置了地图的
  • 使用 == 比较 Long 对象类型和原始 int

    我有一个通过调用返回 Long 对象数据类型的方法 resp getResultCode 我想比较一下HttpStatus GONE value 它实际上只返回一个原始 int 值410 Long 会拆箱自身以正确地与 int 原语进行比较
  • 点击超链接时调用 javascript 函数

    我正在 ASP NET 的 C 代码隐藏文件中动态创建超链接 我需要在客户端点击时调用 JavaScript 函数 我该如何做到这一点 仍然更整洁 而不是typical href or href javascript void or hre
  • 图像上的中心水印

    我需要在图像上添加水印 我已经使用此代码解决了问题 工作良好 但图像位于左 下角 如何设置水印在图片中心居中 img test jpg Load the image where the logo will be embeded into i
  • 如何声明多个元素共有的属性?

    我有多个元素想要赋予这些属性 这在 DTD 中是否可行 或者我必须手动完成 另外 当我在这里时 我认为宣布margin and padding属性就是这样 有谁知道更好的方法
  • Docker 容器在“docker run -d”后将自动停止

    根据我到目前为止阅读的教程 使用 docker run d 将从镜像启动一个容器 容器将在后台运行 这是它的样子 我们可以看到我们已经有了容器 id root docker home root docker run d centos 605
  • 同时捕获输出行数和返回代码

    我正在编写一个 bash 脚本 它将调用一个程序 我们称之为 foo 该程序返回一些输出 并给出返回代码 我关心程序的返回码和输出的行数 但不关心输出本身 由于该程序涉及通过互联网检索数据 因此我不希望调用它两次 特别是 如果两次调用中只有
  • READ_UNCOMMITTED 与无事务?

    在事务外部执行 SQL 与在 READ UNCOMMITTED 隔离模式下执行 SQL 之间有什么区别 澄清 我试图理解两者之间的区别java sql Connection TRANSACTION NONE http download or
  • 使用 Google Places API 时 Flutter-Web 出现 XMLHttpRequest 错误(firebase 托管)

    在我的 Flutter Web 应用程序中 我尝试使用 flutter google places 包获取地址 我正在尝试简单的代码来获取自动完成地址字段 MyTextField 只是一个自定义的文本字段 final addressFiel
  • IE8固定标题,可滚动GridView

    我知道有人问过这个话题 但这些帖子都已经过时了 或者在 IE8 上不起作用 简而言之 我们基本上想要在 GridView 中对列标题进行 Excel 样式锁定 我见过几个解决方案 其中一个 jquery css setExpression
  • Webkit 浏览器在确定表格布局中的单元格宽度时不考虑填充:已修复

    我在申请时得到不同的结果table layout fixed到表格并在单元格上使用填充 IE 和 Firefox 似乎可以通过将单元格宽度和填充加在一起来正常工作 Chrome 和 Safari 仅使用单元格宽度 我看到该问题存在一个错误
  • Javascript:在文档中查找 URL

    如何在文档中查找 URL 即 www domain com 并将其放入锚点中 www domain com html Hey dude check out this link www google com and www yahoo com