JavaScript 实现网页划词标记与快捷搜索功能

听雨眠

发布时间：2026-10-13 | 3人浏览过

原创

本文介绍如何利用原生 JavaScript 结合鼠标事件，实现在网页中选中文字后自动进行高亮标记，并在选区旁弹出快捷搜索按钮的功能，从而提升用户的阅读与检索体验。

功能原理与逻辑

该功能主要依赖于对鼠标动作的实时监听。核心逻辑包括捕获鼠标的按下、移动和释放事件以确定选区范围；利用 DOM API 获取当前选中的文本内容；通过 CSS 样式将选中的文本以特定格式（如加粗或变色）呈现；最后根据坐标计算位置，动态插入一个包含搜索链接的 Div 元素。

第1步：初始化页面与绑定事件

首先，需要在页面加载完成后创建用于显示搜索提示的 div 容器。同时，绑定 onmousedown、onmouseup 和 ondblclick 等关键事件，以便精准捕捉用户的交互意图，区分普通点击、双击以及拖拽选中的行为。

第2步：处理文本选中与高亮

当用户完成文本选中操作时，脚本会识别所选内容的长度。若存在有效文本，则使用临时占位符包裹选区，随后通过字符串替换的方式，为原内容嵌入 <u> 标签并添加内联 CSS 样式（如字体粗细和颜色），从而实现视觉上的高亮效果。此步骤确保了标记不会干扰原有排版结构。

第3步：定位并生成搜索弹窗

检测到选中结束后，系统会根据当前鼠标坐标（结合滚动条偏移量）计算搜索框的绝对位置。若选中内容为空，则隐藏搜索框；否则，显示一个悬浮的 div，内部包含指向搜索引擎的链接，并将用户选中的文本作为参数拼接进 URL，实现一键搜索。

第4步：功能开关控制

为了适应不同场景的需求，提供一个开关机制。通过触发特定的按钮调用控制函数，可以全局启用或禁用划词搜索功能，避免在不需要该交互的页面上产生冗余响应。

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=javascript>
document.body.onload=adddiv;
document.onmousedown=recordobj;
document.ondblclick=dbclick;
document.onmouseup=showselect;
var starobj,isdb=false,allow=true;

function isallow()
{
if(allow){
allow=false;
alert('is closed');
}
else{
allow=true;
alert('is opend');
}
}

function dbclick()
{
isdb=true;
}
function recordobj()
{
starobj=event.srcElement;
}
function showselect() {
var str="";
if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==starobj&&!isdb&&allow)
{
var oText=document.selection.createRange();

if(oText.text.length>0)
{
str=oText.text;
oText.text="BuB"+oText.text+"EuE";
}

oText.select();
event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>");

}

searchgoogle(str)
isdb=false;
}

function searchgoogle(str)
{
var obj=document.getElementById("searchgoogle");
if(str.length>0)
{
obj.style.display="block";
obj.style.position="absolute";
obj.style.zIndex=999;
obj.style.top=document.body.scrollTop+event.y-25;
obj.style.left=document.body.scrollLeft+event.x+5;
obj.style.width=80;
obj.innerHTML="<a target=_blank href=http://www.google.com/search?ie=UTF-8&oe=UTF-8&q="+str+" style='BORDER-RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>Search It！</a>";

}
else 
{
obj.style.display="none";
}
}

function adddiv()
{
var mobj = document.createElement("div");

mobj.id="searchgoogle";

document.body.appendChild(mobj);
}

//-->
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="关闭/打开划词功能">
<p>qrasfdasfasfdasfsafasdfsafsafasdfasdfasd</p>
</body>
</html>

使用说明

将上述代码嵌入 HTML 文件的 <body> 区域即可生效。页面加载后会初始化一个隐藏的搜索层。用户只需在页面任意非输入框、非链接区域按住鼠标左键并拖动以选中文字，松开鼠标后即可看到文字被标记并出现 "Search It！" 按钮，点击按钮即可跳转至搜索引擎查看结果。页面左上角提供了控制开关，可根据需要随时启停该特性。

以上就是 JavaScript 实现划词标记与划词搜索功能的详细内容，更多关于 JavaScript 网页交互的资料请关注本站其它相关文章！