JavaScript / jQuery getSelection突出显示合并span html元素
JavaScript / jQuery getSelection突出显示合并span html元素是指使用JavaScript或jQuery中的getSelection方法来获取用户在页面上选择的文本，并将其包裹在一个或多个span元素中以实现突出显示效果。
具体步骤如下：
- 使用getSelection方法获取用户选择的文本。该方法返回一个Selection对象，其中包含了用户选择的文本信息。
- 使用Selection对象的getRangeAt方法获取选中文本的范围。该方法返回一个Range对象，表示选中文本的起始和结束位置。
- 使用Range对象的surroundContents方法将选中文本包裹在一个新的span元素中。可以通过创建一个新的span元素，并使用Range对象的extractContents方法将选中文本从文档中移除，然后将其插入到新创建的span元素中。
- 可以选择性地为新创建的span元素添加样式，以实现突出显示的效果。可以使用CSS样式属性，如background-color、color等来设置文本的背景色、字体颜色等。
以下是一个示例代码：
// 获取用户选择的文本
var selectedText = window.getSelection().toString();
// 创建一个新的span元素
var spanElement = document.createElement('span');
// 设置span元素的样式
spanElement.style.backgroundColor = 'yellow';
// 获取选中文本的范围
var range = window.getSelection().getRangeAt(0);
// 将选中文本从文档中移除，并插入到新的span元素中
range.surroundContents(spanElement);
// 将新创建的span元素插入到文档中
range.insertNode(spanElement);这种技术可以应用于各种场景，例如在网页编辑器中实现文本高亮、搜索结果中的关键词高亮显示等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse
相关·内容
可能重复：
我有一个关于HTML和javascript的问题。我买了下面的芦笋。
function add_span(){
// ??
}
<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>
是否有可能在用户之后得到以下结果
通过鼠标选择突出显示的文本单击按钮
例如：
突出显示“statement1”，单击按钮
预期结果：
<inp
浏览 2提问于2011-07-14得票数 6
1回答
我的工作是突出显示一个文本，用户选择在一个html页面。
为此，我得到的值是用户通过拖动鼠标选择的单词。我把它们放在一个数组的onmouseup函数中。
当我点击一个按钮时，我正在进行高亮显示。但是我无法突出显示正确的位置，单词是突出显示的，但位置是错误的。
这个单词在div中出现了4次，它总是突出显示第一个单词，即使我选择了第四个单词。
这是我的代码，这里的问题是什么。
<html>
<head>
<style>
textarea {
width:100%;
height:150px;
}
浏览 0提问于2016-01-06得票数 0
我正在使用Summernote，但我也注意到，即使使用平面javascript，无论何时双击项目符号列表项来突出显示它，并试图检索所选的LI元素，都会返回列表中的下一项，而不是刚才突出显示的项。
下面是一个例子：
$('#btn').on('click', function() {
this.getHighlightedElement();
}.bind(this));
function getHighlightedElement() {
var selectedNode = window.getSelection().focusNode;
$(
浏览 3提问于2017-10-02得票数 0
我有一个如下所示的div列表：
<div id="main1">
<span class="username">Username_1</span>
white some text content inside div...
blue some text content inside div...
yellow some text content inside div...
</div>
<div id="main2">
<span clas
浏览 4提问于2015-04-04得票数 1
1回答
今天早上，我一直在环顾四周，似乎什么都没起作用，我正在尝试做一些类似于概念的东西，当你在文本区域突出显示文本时，弹出会显示你可以在哪里编辑文本。我可以整理一下框中按钮的功能，但是我不知道应该使用什么来触发一种关于突出显示的事件，从而在一个相对于突出显示的位置弹出这个框。到目前为止，我链接了这个概念，引用了我的站点和HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equi
浏览 8提问于2021-12-13得票数 0
回答已采纳
我正在尝试使用javascript来高亮显示用户单击某个奇怪的突出显示按钮时选择的文本(就像在高亮显示的文本中一样)。它只需要与WebKit或火狐一起工作，但这似乎几乎是不可能的，因为它必须在以下情况下工作：
<p>this is text</p>
<p>I eat food</p>
当用户在浏览器中从"is text“到"I eat”进行选择时(不能只在那里放一个跨度)。
这个案例：
<span><span>this is text</span>middle text<span>t
浏览 0提问于2008-11-20得票数 26
1回答
我想突出显示用户选择的文本。我不能使用基于JQuery的应用程序接口来突出显示，因为我想要用户特定的突出显示。
下面是我的代码的样子。
var range = window.getSelection().getRangeAt(0);
var sel = window.getSelection();
range.setStart( sel.anchorNode, sel.anchorOffset );
range.setEnd(sel.focusNode,sel.focusOffset);
highlightSpan = document.createElement("span"
浏览 1提问于2010-05-05得票数 0
是否可以突出显示网页上的文本，然后使用javaScript检查html？(假设javascript将HTML拼写到另一个DIV中)
我正在为chrome构建一个扩展，我希望用户能够突出显示文本，并且我希望该扩展能够做两件事:复制文本(在textarea/input或span/div/any-element中)，或者在span/div/any-element中检查所选文本的HTML。
这都是在假设chrome能够编辑和检查DOM的基础上实现的。我相信情况就是这样，因为我在GC的扩展管理器中收到了这个警告
这告诉我这些扩展有一些访问权限。至少设置为页面地址。有没有更多的通道？
浏览 0提问于2012-05-24得票数 0
回答已采纳
1回答
我希望能够获得在用户突出显示的文本之前出现的字符，并且我需要在其中包括html。当用户突出显示这一点时，我希望能够找出有尖括号(或任何其他字符)
<span>word</span>
下面将为我提供选择，并为我提供开始和结束索引，但这些索引是相对于本文所属的节点的。它也是与dom相关的，不包括html。
selectedText= childwindow.getSelection();
为了解决这个问题，我尝试在页面的indexOf字符串上获取这段文本的HTML值，这是可行的。
childwindow.document.documentElement.innerHTML.
浏览 2提问于2017-11-23得票数 0
我一直在研究如何允许访问者选择包装在<p>标记中的多个文本部分来突出显示它们，然后单击一个按钮删除所有突出显示。
通过将classList添加到创建的<span>元素中，选定的文本突出显示得很好。
如果用户选择与突出显示的文本重叠的文本，则Uncaught DOMException: Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.
删除classList会产生空跨度的分段文本。
浏览 0提问于2019-08-30得票数 3
5回答
我使用鼠标选择html页面(在firefox中打开)上的一些文本，并使用javascript函数创建/获取与所选文本相对应的create对象。
userSelection =window.getSelection();
var rangeObject = getRangeObject(userSelection);
现在我想突出显示范围对象下的所有文本。我这样做，
var span = document.createElement("span");
rangeObject.surroundContents(span);
span.style.backgroun
浏览 1提问于2010-04-06得票数 17
回答已采纳
2回答
我想知道如何使用JQuery选择器选择突出显示的文本。例如，要选择包含类的元素，可以使用.class，对于ID，可以使用#id。
我应该为突出显示的文本使用什么，以便(例如)隐藏它们：
$("Highlighted text").hide();
什么是突出显示的文本选择器，如何隐藏突出显示的文本？
浏览 0提问于2014-08-08得票数 2
从选定的/高亮的文本中看到。在得到html的过程中也是有效的。
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
浏览 2提问于2015-09-12得票数 2
回答已采纳
我有这两个函数：
var $mainEdit= $("#main-edit");
function getSelText()
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSele
浏览 1提问于2011-10-03得票数 0
回答已采纳
4回答
如何在元素中的选定文本周围添加<span>标记？
例如，如果有人突出显示"John"，我想在它周围添加span标记。
HTML
<p>My name is Jimmy John, and I hate sandwiches. My name is still Jimmy John.</p>
JS
function getSelectedText() {
t = (document.all) ? document.selection.createRange().text : document.getSelection();
retur
浏览 38提问于2014-07-11得票数 18
回答已采纳
我正在尝试获取html元素中的文本选择，然后在其周围插入span标记。到目前为止，我在正确的索引上遇到了问题。如果我突出显示<p>块中的文本，则索引在<br>标记后变为0。我希望能够切出文本，然后在突出显示文本之后使用span标记将其重新组合，并抓取所选文本并通过Ajax将其发送到服务器。
以下是一些示例HTML和代码：
<html><body><p>This is some sample text.<br>Select this text.</p></body></html>
jQue
浏览 3提问于2012-06-24得票数 1
回答已采纳
我想要达到这样的结果：
当我按下鼠标或在左边的某个项目上悬停时，我想在右边突出显示该项目。
我该怎么做？是否可以通过javascript、jquery或css？
以下是代码：
<div id="searchcontainer">
<script>
var html2;
html2 += '<div id="rightcontainer">';
html2 += '<img id="productimage" src="src/images
浏览 2提问于2017-10-05得票数 1
回答已采纳
我找到了这个javascript代码来突出显示选定的文本，如何添加一个函数来删除高亮背景(删除创建的跨度)，只需单击突出显示的文本？。
highlight=function()
{
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor =
浏览 2提问于2012-01-02得票数 1
回答已采纳
我已经使用这个脚本通过单击一次来获得一些突出显示的文本
<script type="text/javascript">
$('#maincode').click(function(){
var span = $('.selectcode')[0],
sel, range;
if(window.getSelection){
sel = window.getSelection();
range = document.createRange();
range.selectNode(span);
s
浏览 14提问于2017-12-15得票数 1
回答已采纳
我有以下div：
<div id="target" >hello(first), hello(second), hello(third), hello(fourth)</div>
并基于此编写以下代码
$(document).ready(function(){
$('#target').bind('mouseup', function(){
var needle = window
.getSelection()
.getRangeAt
浏览 1提问于2011-06-13得票数 3
回答已采纳
如何让javascript或jquery抓取我用鼠标或键盘选择/突出显示的文本？
浏览 3提问于2011-05-30得票数 0
回答已采纳
我正在将纯JS文本突出显示脚本转换为jQuery，但我正在尝试找出与insertNode等效的jQuery是什么：
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.i
浏览 0提问于2013-03-06得票数 1
回答已采纳
我在中找到了一段非常酷的代码，可以捕获用户在div中突出显示的所有文本。但是，在我的示例中，我希望实际存储div中选择的所有元素的元素ids。我可以通过操作以下示例(基于)的输出来做到这一点，但我希望有一种更优雅的方法来直接检索所选的元素？
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.ra
浏览 1提问于2018-03-21得票数 1
回答已采纳
我目前的解决办法是：
获取选定的html (包括文本和html标记)，即: selText
highlightText = <span>selText</span>
在主体或文档的selText (或鼠标拖动的元素)中查找innerHTML
用highlightText替换
但是如果文档是：a a a a a a和a，则选择最后一个a。我的函数将突出显示第一个或全部a。
有什么建议吗？
谢谢。
浏览 2提问于2014-11-24得票数 0
回答已采纳
2回答
上下文：
我试图找出一种方法来判断某个用户高亮显示的文本部分是否包含一个类，如果包含了，则不允许用户突出显示该文本块。
在我的网站上，用户可以创建自己的文章。在这些文章中，用户可以高亮显示文本并对其进行评论。以这篇文章为例：
Lorem ipsum dolor同为圣洁动物
如果这是用户的文章，我可以进去高亮显示文本"Lorem“，如下所示：
"Lorem ipsum dolor -“
这将在突出显示的文本周围创建一个类，该文本将background-color设置为grey。
此时，我不允许用户高亮显示任何已经突出显示的文本("Lorem“)，因为我在正确突出显
浏览 2提问于2020-05-07得票数 2
回答已采纳
3回答
当用户选择文本时，在执行最后的任务之前，我需要检查两件事情：
选择的文本在主..entry content中吗？，我已经这样做了.
选择的文本是外部的还是疯狂的任何突出显示的css类？我在这里需要帮助.
基本上：
如果选择了“他的早期熟悉感”，则返回false
如果选择了“第一个南非波尔博尔俱乐部的负责人”，则返回true
HTML源：
<p>
<span id="subject-47" class="subject highlighted">Semencic credits his early f
浏览 0提问于2016-05-03得票数 4
我有一个内容可编辑的div (带有id 'editor1')，允许用户输入文本。然后有一个函数，允许他们对任何高亮显示的文本进行着色。我的js使用window.getSelection().getRangeAt(0)，但问题是它们可以突出显示div之外的单词，它们的颜色也会发生变化。到目前为止，我已经尝试过：
function red(){
{
var getText = document.getElementById("editor1").innerHTML;
var selection =
浏览 6提问于2016-08-04得票数 5
回答已采纳
2回答
以下面的HTML为例：
<span id="1">The </span><span id="2">quick brown fox </span><span id="3">jumped </span><span id="4">over the lazy dog.</span>
渲染出来的，看起来就像：
The quick brown fox jumped over the lazy dog.
如果我高亮显示渲染文本的一部分，我如何判断高亮
浏览 0提问于2013-06-12得票数 2
回答已采纳
我想做一些类似于这个网站和wordpress所做的事情。当用户在屏幕上突出显示文本，然后单击工具栏上的按钮时，它将在文本周围环绕一个html标记。在jquery中，我可能会使用.wrap类，但如何检测用户是否突出显示了某些内容。
例如，当用户编写Hello World并单击粗体按钮时，它将显示为<b>Hello World</b>
浏览 21提问于2016-08-03得票数 1
回答已采纳
我在HTML页面中有一个简单的javascript问题。
在我的示例中，用户可以使用鼠标选择副翼中的一些文本，例如使用鼠标突出显示'My name is John'，然后单击输入按钮中的一个，然后将选择的文本应用于选定的按钮样式到文本中(例如添加CSS颜色并清除CSS颜色)。
例如，如果我使用鼠标突出显示‘我的名字是约翰’，并点击‘红色’按钮，‘我的名字是约翰’的文本将变成红色。
有一个HTML页面和一个js文件。
我在HTML页面中有以下代码：
// text.html
// 3 input buttons with red, yellow and green colour
浏览 2提问于2011-07-14得票数 1
回答已采纳
就像标题说的那样，比如说我在某个div里面有一个文本的网站，有没有办法突出它的某些部分，并知道它发生了什么？如果一个文本中出现了4个单词“某事”，而我突出显示了第三个词，那么如何使用Javascript/JQuery获取这些信息呢？
浏览 0提问于2014-12-05得票数 1
回答已采纳
一个我找不到答案的简单问题：
如何使用JavaScript (或jQuery)取消选择网页上可能选中的任何文本？
例如，用户点击并拖动以突出显示一些文本-我希望有一个函数deselectAll()来清除此选择。我该怎么写呢？
谢谢你的帮助。
浏览 51提问于2010-07-03得票数 139
回答已采纳
我有一个关于javascript的问题。我有以下html代码，4个按钮，2个用于突出显示颜色，1个用于清除所选颜色，1个用于清除所有颜色。
当用户使用鼠标突出显示文本并单击“红色”按钮时，例如“我的名字是John”，所选文本将突出显示为红色(假设有一个名为“红色”的类)。
例如：
// Before select the text and click the button
<p id='text'>
My name is John,
I live in ABC and I have a car.
I like to play TV g
浏览 2提问于2011-07-19得票数 2
我从文本字符串加载Webview，如下所示：
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(), Base64.NO_PADDING);
webview.loadData(encodedHtml, "text/html", "base64");
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
我想添加一个颜色突出显示选项到菜单，当用户长时间按一个单词
浏览 5提问于2021-06-16得票数 1
回答已采纳
在本质上，我试图实现一个功能，突出特定的文本时，选择。这是严格针对谷歌Chrome浏览器的。
例如:在选择之前：
<html>
<body>
<p>sample text</p>
</body>
</html>
从“示例文本”中选择“文本”后：
<html>
<body>
<p>sample <span class="state-highlighted">text</span> </p&
浏览 1提问于2020-01-06得票数 2
回答已采纳
我在使用html和javascript时遇到了困难。我的html页面允许用户选择文本并用颜色突出显示。现在，我想将状态保存到数据库中，以便稍后为该用户显示。当然，我可以在用户编辑后保存整个html。但我只想保存一些参数，结合原始的html来显示用户上次看到的页面状态。我们可以使用这个函数：
var index = innerHTML.indexOf(text);
以突出显示该索引处的文本。但如果页面中有许多相同的文本，我希望突出显示word用户之前突出显示的内容。
有没有人可以教我如何用javascript来完成这项工作？
我非常感谢你的帮助。
浏览 3提问于2013-09-23得票数 19
1回答
我正在尝试创建jquery，它允许通过鼠标突出显示选定的文本，包括几个选择(例如，三个单独的部分)。目前我有，但是在这段代码中遇到了以下问题：
它允许单一选择(虽然我希望有可能选择第一句，然后第三句，并让他们都独立标记)。
因为它基于regexp‘as，所以当我选择单个字母(例如'a')时，所有的字母都会被选中。
样式(例如粗体)没有保留。
请建议我如何改进这个脚本来解决上述问题。谢谢!
js代码：
enableHighlights(".mainPane");
function enableHighlights(thisDiv) {
浏览 3提问于2015-11-26得票数 1
1回答
基于游标的句子检测
、、、
$("#paragraph").html("<span>The Faculty Development Programme would enable identification and preparation of relevant course transaction resources.</span><span> These resources include Reference Books, Films, PPTs, Case Lets and Case Studies Work Education, Experienti
浏览 0提问于2019-01-10得票数 0
回答已采纳
我使用jQuery来突出显示HTML页面中一些类似的部分。为了突出显示类似的单词，我尝试更改html内容。因此，首先，我得到了元素的html内容。并通过添加span标记以突出显示特定颜色的类似单词来更改该html。我可以成功地制作html内容，并使用jQuery替换html内容。但问题就在这里。在更改html内容时，文本的某些部分会自动突出显示。当我评论这部分时，它不会发生。所以我认为问题就在这里。
例如，当我选择42时，从html的第一部分到42将自动突出显示。
这是我的html文件。
感谢你的帮助。谢谢
var selection = '';
var selectedOb
浏览 1提问于2021-01-09得票数 0
回答已采纳
3回答
我正在做一个简单的网页应用程序，让用户选择文本并用黄色突出显示(或者任何颜色，无关紧要)。这是我到目前为止所知道的：
function replaceSelectedText() {
var sel, range;
var replacementText, spanTag;
if (window.getSelection) {
replacementText = window.getSelection().toString();
spanTa
浏览 0提问于2012-12-20得票数 1
回答已采纳
2回答
如何检测用户选择(用鼠标突出显示)是否在某个元素的子元素内/子元素内？
示例：
<div id="parent">
sdfsdf
<div id="container">
some
<span>content</span>
</div>
sdfsd
</div>
伪代码：
if window.getSelection().getRangeAt(0) is a child of #container
return true;
else
r
浏览 0提问于2012-05-30得票数 5
我有一个内容可编辑的div，并试图用<span>标记替换<font>标记，但在使用jQuery replaceWith()函数替换html之后，光标默认位于文本的开头，但我希望它位于替换html的末尾。
以下是重现该问题的。如果再现该问题有任何问题，请让我知道。
以下是演示代码要点
<div id="test" contenteditable=true>
<p> <font color="blue">Text to be replaced</font> </p>
</d
浏览 5提问于2013-07-25得票数 3
在下面的jQuery中，突出显示的跨度被插入到现有跨度中，从而创建了一个嵌套的跨度元素。是否可以修改脚本，使其只在现有范围中添加一个突出显示类，而不是创建新的范围？(示例中的)
var content = jQuery('#content').html();
// append to a div to make sure there's a top-level tag.
var html = jQuery("<div></div>").append(content).html();
// keywordList is a se
浏览 0提问于2011-04-26得票数 0
回答已采纳
1回答
我找不到任何东西。是否有JQuery解决方案可以检索突出显示的文本？我需要检查跨度的高亮文本，获取这些跨度的样式属性，并根据这些属性对它们进行操作。我可以使用正则表达式或任何明显的东西来完成这一部分，但首先我需要访问突出显示的文本！我正在努力寻找一个跨浏览器的纯javascript解决方案，所以如果你手头有一个这样的解决方案，那也会有很大的帮助。
谢谢!
浏览 0提问于2013-06-21得票数 10
回答已采纳
解决了！
我正在向tinyMCE可视化编辑器中添加SPAN标记，以显示突出显示的文本。
在突出显示的范围内输入时，可能会出现游标被困住的情况.没有办法键入跨距的一侧。
我已经创建了一些在“双空间”上激发的javascript。
下面的代码..。
1.)检查当前光标位置是否在我突出显示的范围内。
2.)检查当前游标位置是否位于该跨度的末尾(就在关闭/SPAN之前)
3.)将当前光标从关闭的/SPAN的左侧移到关闭的/SPAN的右侧。
任何或全部的帮助都将受到感谢。
正确的代码！
键入时，如果在SPAN元素的末尾找到了自己，请按两次空格键以脱离当前的跨度。
var mycc = ''
浏览 7提问于2013-06-25得票数 2
回答已采纳
有谁可以帮我？我有这些密码，
$(document).on("mouseup",".wrap",function(){
var highlight = window.getSelection();
if(highlight.toString().length>=1){
var spn = '<span class="highlight">' + highlight + '</span>';
var text = $(this).text(
浏览 5提问于2014-05-19得票数 1
回答已采纳
2回答
当点击backspace/delete键时，我使用以下函数将突出显示的文本包装为<span>。
$(document).keydown(function(event) {
var selection = document.getSelection();
typoNumber++;
if (event.keyCode == 8 || event.keyCode == 46) {
event.preventDefault();
var span = document.createElement("span");
span.setA
浏览 2提问于2016-10-27得票数 0
回答已采纳
我的目标是让用户选择带有光标的文本，并将所选内容输出到不同的div中，并在<span>标记中突出显示文本。
所以，我有这样的选择：
var sel = jQuery.selection();
然后将所选内容包装到<span>中并输出：
var $title = jQuery(this).parent().find('.title').text();
var $result;
$result = $title.replace(sel, '<span>'+sel+'</span>');
// outp
浏览 3提问于2016-04-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
