Select the text and add a style

Time:2021-9-18

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

<style>

.tag.blue{

border: 3px solid rgb(32, 156, 238);

background-color: rgb(32, 156, 238);

}

.tag.red{

border: 3px solid rgb(255, 51, 51);

background-color: rgb(255, 51, 51);

}

.tag{

color: #fff;

border-radius: 5px;

font-style: normal;

}

.tag > .delete{

/ margin-left: 5px; /

background-color: rgba(10,10,10,.2);

border: none;

border-radius: 290486px;

cursor: pointer;

display: inline-block;

font-size: 0;

height: 20px;

outline: 0;

position: relative;

vertical-align: top;

width: 20px;

margin-top: 6px;

margin-left: 4px;

}

.tag > .delete::after{

height: 50%;

width: 2px;

background-color: #fff;

content: “”;

display: block;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);

transform: translateX(-50%) translateY(-50%) rotate(45deg);

-webkit-transform-origin: center center;

transform-origin: center center;

}

.tag > .delete::before{

height: 2px;

width: 50%;

background-color: #fff;

content: “”;

display: block;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);

transform: translateX(-50%) translateY(-50%) rotate(45deg);

-webkit-transform-origin: center center;

transform-origin: center center;

}

</style>

</head>

<body>

<noscript>

We’re sorry but <%= htmlWebpackPlugin.options.title %> doesn’t work properly without JavaScript enabled. Please enable it to continue.

</noscript>

<div id=”app”></div>

<span>abcdefjhijk</span>

<!– built files will be auto injected –>

< p class = “ABC” id = “123” style = “width: 200px; line height: 2;” > 1234abcdefjhijk the bright moon in front of the bed is suspected to be frost on the ground. Raise your head to look at the bright moon and bow your head to think of your hometown

China has a history of 5000 years.

</p>

< button id = “button” > select the text and click the button < / button >

<script type=”text/javascript”>

var containerElement = document.getElementById(“123”)

// var rang = document.createRange();

// rang.selectNode(containerElement)

// console.log(“rang”, rang);

var replaceSelectedStrByEle = function(className=”tag red”){

var selecter = window.getSelection();

console.log(“Selection:”, selecter);

// var selectStr = selecter.toString();

// console.log(“selectStr:”, selectStr)

if (selecter.rangeCount) {

var rang = selecter.getRangeAt(0);

// console.log(selecter.rangeCount, rang)

// console.log(“rang.commonAncestorContainer.chilNode:”, rang.commonAncestorContainer.childNodes);

// console.log(“rang.commonAncestorContainer.children:”, rang.commonAncestorContainer.children);

// console.log(“rang.commonAncestorContainer:”, rang.commonAncestorContainer);

// console.log(“rang.commonAncestorContainer.parentNode:”, rang.commonAncestorContainer.parentNode)

//The selected text can be marked only when the following conditions are met

//1. The direct parent element is containerelement

//2. The selected text is only text and does not contain other child nodes

if(rang.commonAncestorContainer === containerElement || rang.commonAncestorContainer.parentNode === containerElement){

if(rang.commonAncestorContainer.childNodes.length == 0){

var signElement = document.createElement(“i”);

var deleteIcon = document.createElement(“button”);

signElement.className = className;

deleteIcon.className = “delete”;

var deleteFn = function(event){

// console.log(event.target.parentNode.childNodes);

var target = event.target;

var parentNode = target.parentNode;

parentNode.outerHTML = parentNode.firstChild.nodeValue;

target.removeEventListener(“click”, deleteFn)

}

deleteIcon.addEventListener(“click”, deleteFn)

rang.surroundContents(signElement);

signElement.appendChild(deleteIcon)

}

}

}

}

var oBtn = document.getElementById(“button”);

oBtn.onclick = function() {

// replaceSelectedStrByEle();

replaceSelectedStrByEle(‘tag red’);

// var selectedText;

// if(window.getSelection){

// selectedText=window.getSelection();

// }else if(document.selection){

// selectedText=document.selection.createRange().text;

// }

// alert(selectedText);

};

var shortcutkey = {q: “tag red”, p: “tag blue”}

// window.keyToCodeMap = {“q”:81,”w”:87,”e”:69,”r”:82,”t”:84,”y”:89,”u”:85,”i”:73,”o”:79,”p”:80,”a”:65,”s”:83,”d”:68,”f”:70,”g”:71,”h”:72,”j”:74,”k”:75,”l”:76,”z”:90,”x”:88,”c”:67,”v”:86,”b”:66,”n”:78,”m”:77,”Q”:81,”W”:87,”E”:69,”R”:82,”T”:84,”Y”:89,”U”:85,”I”:73,”O”:79,”P”:80,”A”:65,”S”:83,”D”:68,”F”:70,”G”:71,”H”:72,”J”:74,”K”:75,”L”:76,”Z”:90,”X”:88,”C”:67,”V”:86,”B”:66,”N”:78,”M”:77}

// window.codeToKeymap = {65: “A”, 66: “B”, 67: “C”, 68: “D”, 69: “E”, 70: “F”, 71: “G”, 72: “H”, 73: “I”, 74: “J”, 75: “K”, 76: “L”, 77: “M”, 78: “N”, 79: “O”, 80: “P”, 81: “Q”, 82: “R”, 83: “S”, 84: “T”, 85: “U”, 86: “V”, 87: “W”, 88: “X”, 89: “Y”, 90: “Z”};

window.codeToKeymap = {65: “a”, 66: “b”, 67: “c”, 68: “d”, 69: “e”, 70: “f”, 71: “g”, 72: “h”, 73: “i”, 74: “j”, 75: “k”, 76: “l”, 77: “m”, 78: “n”, 79: “o”, 80: “p”, 81: “q”, 82: “r”, 83: “s”, 84: “t”, 85: “u”, 86: “v”, 87: “w”, 88: “x”, 89: “y”, 90: “z”}

//Monitor keyboard events

document.addEventListener(“keyup”, function(event){

// console.log(event.key, event.keyCode)

var letter = codeToKeymap[event.keyCode];

// console.log(“letter:”, letter);

var className = shortcutkey[letter]

// console.log(“className”, className);

if(letter && className){

replaceSelectedStrByEle(className)

}

})

</script>

</body>

</html>

Recommended Today

Seven Python code review tools recommended

althoughPythonLanguage is one of the most flexible development languages at present, but developers often abuse its flexibility and even violate relevant standards. So PythoncodeThe following common quality problems often occur: Some unused modules have been imported Function is missing arguments in various calls The appropriate format indentation is missing Missing appropriate spaces before and after […]