☰

页面插入按钮

在页面尾部插入按钮

// ==UserScript==
// @name         页面插入按钮
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  在页面尾部插入按钮
// @author       TCH
// @match        *://*.com/*
// @grant        none
// ==/UserScript==
 
(function()
{


      function find(searchVal, bgColor) {
            var oDiv = document.getElementsByTagName("body")[0];
            var sText = oDiv.innerHTML;
            var reg1 = /<script[^>]*>(.|\n)*<\/script>/gi; //去掉script标签 
            sText = sText.replace(reg1, "");
            var bgColor = bgColor || "orange";
            var sKey = "<span name='addSpan' style='background-color: " + bgColor + ";'>" + searchVal + "</span>";
            var num = -1;
            var rStr = new RegExp(searchVal, "g");
            var rHtml = new RegExp("\<.*?\>", "ig");//匹配html元素
            var aHtml = sText.match(rHtml); //存放html元素的数组
            sText = sText.replace(rHtml, '{~}');  //替换html标签
            sText = sText.replace(rStr, sKey); //替换key
            sText = sText.replace(/{~}/g, function () {  //恢复html标签
                  num++;
                  return aHtml[num];
            });
            oDiv.innerHTML = sText;
      }


find('字体');
      find('红');


let div=document.createElement("div");
div.style="position:fixed; bottom:0; left: 0; margin: auto; right: 0;text-align:center;"
div.innerHTML='<span id="span-1"style="width:150rpx;margin:10px;background-color: red;font-size: 30px;border-color: red;border-radius: 5px;" >标注</span><span class="sp" style="width:150rpx;margin:10px;font-size: 30px;border-radius: 5px;">取消</span>';
div.onclick=function(event){
    if(event.target.id=="span-1"){
        
  const selection =document.getSelection();

  if (selection !== null && selection !== void 0 && selection.toString()) {
      alert( document.getSelection().toString());
 
  const range = document.getSelection().getRangeAt(0);
  const docObj = range.extractContents(); //移动了Range 中的内容从文档树到DocumentFragment（文档片段对象)。
  let dom = document.createElement('span');
  dom.style.color = 'red';
  dom.appendChild(docObj);
  range.insertNode(dom);
alert("span-1被点击了");
  }






    }else if(event.target.className=="sp"){
        alert("sp这一类被点了");
    }
};
document.body.append(div);

 
})();