blocks|key|39631|text|您可以尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39632|$('body').mouseup(function(){
+++var+selection+=+getSelectedText();
+++var+innerHTML+=+$('p').html();
+++var+selectionWithSpan+=+''%2Bselection%2B'';
+++innerHTML+=+innerHTML.replace(selection,selectionWithSpan);
+++$('p').html(innerHTML);++++
});|code-block|syntax|javascript|39633|在您的fiddle中，您将再次打开一个新的，而不是关闭的。请更新一下。|offset|length|style|CODE|39634|entityMap^0|0|0|3|6|L|3|V|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

You can try this:

<pre><code>$('body').mouseup(function(){
 var selection = getSelectedText();
 var innerHTML = $('p').html();
 var selectionWithSpan = '&lt;span&gt;'+selection+'&lt;/span&gt;';
 innerHTML = innerHTML.replace(selection,selectionWithSpan);
 $('p').html(innerHTML); 
});
</code></pre>

and In your <code>fiddle</code> you are again opening a new <code>&lt;p&gt;</code> instead of a closing <code>&lt;/p&gt;</code>. Update that please.

blocks|key|39505|text|THIS+WORKS+(主要是*)！！(从技术上讲，它可以做您想做的事情，但它需要停止！)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|39506|JSFiddle|39507|这会正确地添加<span+...>和，即使在您的元素中有多个选择的实例，并且您只关心所选的实例！|CODE|39508|如果你包括我的注释行的话，第一次的时候它工作得很好。在那之后，事情就变得时髦起来。|39509|我可以添加span标记，但我很难将纯文本替换为html。也许你能想出办法？我们快到了！！它使用getSelection中的节点。不过，节点可能很难使用。|39510|document.getElementById('d').addEventListener('mouseup',function(e){
++++var+s+=+window.getSelection();
++++var+n+=+s.anchorNode;+//DOM+node
++++var+o+=+s.anchorOffset;+//index+of+start+selection+in+the+node
++++var+f+=+s.focusOffset;+//index+of+end+selection+in+the+node
++++n.textContent+=+n.textContent.substring(0,o)%2B'<span+style="color:red;">'
++++++++%2Bn.textContent.substring(o,f)%2B''
++++++++%2Bn.textContent.substring(f,n.textContent.length);
++++++++//adds+the+span+tag
++++//+document.getElementById('d').innerHTML+=+n.textContent;
++++//+this+line+messes+stuff+up+because+of+the+difference+
++++//+between+a+node's+textContent+and+it's+innerHTML.
});|code-block|syntax|javascript|39511|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/z5arj/^0|0|A|0|0|8|0|0|7|A|I|7|0|0|1B|C|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|6|7|18|8|@$9|19|A|1A|B|J]|$9|1B|A|1C|B|J]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1D|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1E|8|@$9|1F|A|1G|B|J]]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1H|8|@]|D|@]|E|$R|S]]|$1|T|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

THIS WORKS (mostly*)!! (technically, it does what you want, but it needs HALP!)

<a href="http://jsfiddle.net/z5arj/" rel="nofollow">JSFiddle</a>

This adds <code>&lt;span ...&gt;</code> and <code>&lt;/span&gt;</code> correctly, even if there are multiple instances of the selection in your element and you only care about the instance that's selected!

It works perfectly the first time if you include my commented line. It's after that when things get funky.

I can add the span tags, but I'm having a hard time replacing the plaintext with html. Maybe you can figure it out? We're almost there!! This uses nodes from <code>getSelection</code>. Nodes can be hard to work with though.

<pre><code>document.getElementById('d').addEventListener('mouseup',function(e){
 var s = window.getSelection();
 var n = s.anchorNode; //DOM node
 var o = s.anchorOffset; //index of start selection in the node
 var f = s.focusOffset; //index of end selection in the node
 n.textContent = n.textContent.substring(0,o)+'&lt;span style="color:red;"&gt;'
 +n.textContent.substring(o,f)+'&lt;/span&gt;'
 +n.textContent.substring(f,n.textContent.length);
 //adds the span tag
 // document.getElementById('d').innerHTML = n.textContent;
 // this line messes stuff up because of the difference 
 // between a node's textContent and it's innerHTML.
});
</code></pre>

blocks|key|39187|text|我有一个解决方案。获取所选项目的Range和deleteContent，然后在其中插入一个新的span。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|39188|$('body').mouseup(function(){
++++var+selection+=+getSelectedText();
++++var+selection_text+=+selection.toString();

++++//+How+do+I+add+a+span+around+the+selected+text?

++++var+span+=+document.createElement('SPAN');
++++span.textContent+=+selection_text;

++++var+range+=+selection.getRangeAt(0);
++++range.deleteContents();
++++range.insertNode(span);
});|code-block|syntax|javascript|39189|您可以看到DEMO+here|39190|更新|BOLD|39191|当然，所选内容将同时删除。因此，如果您愿意，可以使用js代码添加选择范围。|39192|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/edisonator/2w35p/35/^0|G|5|1B|4|0|0|5|9|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1C|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

I have a solution. Get the <code>Range</code> of the selecion and deleteContent of it, then insert a new <code>span</code> in it .

<pre><code>$('body').mouseup(function(){
 var selection = getSelectedText();
 var selection_text = selection.toString();

 // How do I add a span around the selected text?

 var span = document.createElement('SPAN');
 span.textContent = selection_text;

 var range = selection.getRangeAt(0);
 range.deleteContents();
 range.insertNode(span);
});
</code></pre>

You can see the <a href="http://jsfiddle.net/edisonator/2w35p/35/" rel="noreferrer">DEMO here</a>

UPDATE

Absolutly, the selection will be delete at the same time. So you can add the selection range with js code if you want.

blocks|key|2510224|text|您可以简单地这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2510225|$('body').mouseup(function(){
+++var+span+=+document.createElement("span");
++++if+(window.getSelection)+{
++++++++var+sel+=+window.getSelection();
++++++++if+(sel.rangeCount)+{
++++++++++++var+range+=+sel.getRangeAt(0).cloneRange();
++++++++++++range.surroundContents(span);
++++++++++++sel.removeAllRanges();
++++++++++++sel.addRange(range);
++++++++}
++++}
});|code-block|syntax|javascript|2510226|2510227|参考Wrapping+a+selected+text+node+with+span|offset|length|2510228|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6328718/wrapping-a-selected-text-node-with-span^0|0|0|0|2|13|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@$J|X|K|Y|1|Z]]|A|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

You can simply do like this.

<pre><code>$('body').mouseup(function(){
 var span = document.createElement("span");
 if (window.getSelection) {
 var sel = window.getSelection();
 if (sel.rangeCount) {
 var range = sel.getRangeAt(0).cloneRange();
 range.surroundContents(span);
 sel.removeAllRanges();
 sel.addRange(range);
 }
 }
});
</code></pre>

<a href="http://jsfiddle.net/2w35p/40/" rel="nofollow noreferrer">Fiddle</a>

Reference <a href="https://stackoverflow.com/questions/6328718/wrapping-a-selected-text-node-with-span">Wrapping a selected text node with span</a>

How can I add <code>&lt;span&gt;</code> tags around selected text within an element?

For example, if somebody highlights "John", I would like to add span tags around it.

HTML

<pre><code>&lt;p&gt;My name is Jimmy John, and I hate sandwiches. My name is still Jimmy John.&lt;/p&gt;
</code></pre>

JS

<pre><code>function getSelectedText() {
 t = (document.all) ? document.selection.createRange().text : document.getSelection();

 return t;
}

$('p').mouseup(function(){
 var selection = getSelectedText();
 var selection_text = selection.toString();
 console.log(selection);
 console.log(selection_text);

 // How do I add a span around the selected text?
});
</code></pre>

<a href="http://jsfiddle.net/2w35p/" rel="nofollow noreferrer">http://jsfiddle.net/2w35p/</a>

There is a identical question here: <a href="https://stackoverflow.com/questions/2236982/jquery-select-text-and-add-span-to-it-in-an-paragraph">jQuery select text and add span to it in an paragraph</a>, but it uses outdated jquery methods (e.g. live), and the accepted answer has a bug.

Add tags around selected text in an element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何在元素中的选定文本周围添加标记？例如，如果有人突出显示"John"，我想在它周围添加span标记。HTMLMy name is Jimmy John, and I hate sandwiches. My name is still Jimmy John.JSfunction getSele...

问在元素中的选定文本周围添加标记
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在元素中的选定文本周围添加标记EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在元素中的选定文本周围添加标记
EN