The content of this article is about how to add a class name to the selected text (js css implementation). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. <br>
I recently made a small function, the function effect is as shown below:
Just imagine, if after selecting the text, not only We can get the corresponding document fragment, and then get the document position corresponding to the text, <br>so that we can wrap the document fragment with a class The name is then inserted into its original position.
In this case, let’s first learn several concepts of DOM2 and DOM3<br>
<span style="font-family: 微软雅黑, Microsoft YaHei;">1. window.getSelection()</span>
getSelection() method can determine the actual selected text. <br>This method is a property of the window object and document object. Calling it will return a Selection object representing the currently selected text. <br>Each Selection object has the following properties.
anchorNode: The node where the starting point of the selection is located.
anchorOffset: The number of characters in anchorNode that are skipped before reaching the starting point of the selection.
focusNode: The node where the end point of the selection is located.
focusOffset: The number of characters contained in focusNode within the selection.
isCollapsed: Boolean value, indicating whether the starting point and end point of the selection coincide.
rangeCount: The number of DOM ranges contained in the selection
addRange(range): Add the specified DOM range to the selection.
collapse(node, offset): Collapse the selection to the corresponding text offset position in the specified node.
collapseToEnd(): Collapse the selection to the end position.
collapseToStart(): Collapse the selection to the starting position.
containsNode(node): Determine whether the specified node is included in the selection.
deleteFromDocument(): Delete the text in the selection from the document, the same result as the document.execCommand("delete",false, null) command.
extend(node, offset) : Extend the selection by moving focusNode and focusOffset to the specified values.
getRangeAt(index): Returns the DOM range in the selection corresponding to the index.
removeAllRanges(): Remove all DOM ranges from the selection. In effect, this removes the selection, since there must be at least one range in the selection.
reomveRange(range): Remove the specified DOM range from the selection.
selectAllChildren(node): Clear the selection and select all child nodes of the specified node.
toString(): Returns the text content contained in the selection.
by-"Javascript Advanced Programming"
What we need to use is the getRangeAt()
attribute. This attribute returns the corresponding to the index. The DOM range in the selection is a Range
object so that the location of the document fragment can be remembered. <br>console
Take a look at the location of this property
##2.
, will
remove the range selection from the document, and return the range of document fragments , thus obtaining the desired document fragment. 3.
insertNode() is a method of inserting a node at the starting position of the Range. For detailed attributes, you can refer to MDN or Elevation
consoleLet’s take a look at the location of the last two properties
Then let’s get to the code
//css .active { background: #00FF90; } //html <p> 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。 故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。 锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。 蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。 </p> //js function select() { let selectedRange = window.getSelection().getRangeAt(0); //获取选中文本位置,返回Range对象 let selectedFragment = selectedRange.extractContents(); //移除选区文档片段,并返回 let span = document.createElement("span"); span.classList = 'active'; span.appendChild(selectedFragment); //创建span标签添加想要的类名,名把返回的文档片段插入 selectedRange.insertNode(span); //在获取的Range对象中插入span标签 span.onclick = function(ev) { //再点击span标签,在其前面添加span标签内的文本,并删除这个span标签 this.parentNode.insertBefore(document.createTextNode(this.innerText), this); this.parentNode.removeChild(this); }; } document.getElementById('text').onmouseup = function() { select(); window.getSelection().removeAllRanges(); //鼠标松开后取消浏览器默认的深蓝色选中样式 };
Sharing the implementation code for adding and removing JavaScript class names<br>
Secondary classification addition article<br>
The above is the detailed content of How to add a class name to selected text (js+css implementation). For more information, please follow other related articles on the PHP Chinese website!