How to add a class name to selected text (js+css implementation)

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.

Range.extractContents()

extractContents(), will remove the range selection from the document, and return the range of document fragments , thus obtaining the desired document fragment. 3.

Range.insertNode(

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();     //鼠标松开后取消浏览器默认的深蓝色选中样式
    };

Conclusion

The functions of DOM2 and DOM3 are far more than these. It has more delicate and diverse DOM operations, which we need to explore and become familiar with.

Related recommendations:

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!