JS文字操作库(亲测可用)

使用

<template><div class="app"><li class="main_right-btn" @click="selectionColor('yellow')">题干标识</li><li class="main_right-btn" @click="selectionColor('transparent')">取消标识</li><li class="main_right-btn">撤销</li><li class="main_right-btn">恢复</li><li class="main_right-btn" @click="copyText">复制</li><li class="main_right-btn" @click="cutstrText">剪切</li><li class="main_right-btn" @click="pasteText">粘贴</li><textarea id="examText"></textarea></div>
</template><script>
import Mark from '@/utils/TextMark'
export default {components: {},data() {return {}},mounted() {},computed: {},methods: {// 剪切文字方法cutstrText() {this.copyVal = Mark.cutstr('examText')console.log('    this.copyVal ',    this.copyVal );},// 粘贴文字方法pasteText() {Mark.parsestr('examText', this.copyVal)},// 复制当前文字方法copyText() {this.copyVal = Mark.getSelectedText()?.trim()},// 标识文字方法selectionColor(color) {Mark.ColorizeSelection(color)},}
}
</script>
<style scoped  lang="less"></style>

库内容

const Mark = {// 标记方法 SGetNextLeaf: function (node) {while (!node.nextSibling) {node = node.parentNodeif (!node) {return node}}var leaf = node.nextSiblingwhile (leaf.firstChild) {leaf = leaf.firstChild}return leaf},GetPreviousLeaf: function (node) {while (!node.previousSibling) {node = node.parentNodeif (!node) {return node}}var leaf = node.previousSiblingwhile (leaf.lastChild) {leaf = leaf.lastChild}return leaf},// If the text content of an element contains white-spaces only, then does not need to colorizeIsTextVisible: function (text) {for (var i = 0; i < text.length; i++) {if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n') return true}return false},ColorizeLeaf: function (node, color) {if (!Mark.IsTextVisible(node.textContent)) returnvar parentNode = node.parentNodeif (!parentNode) return// if the node does not have siblings and the parent is a span element, then modify its colorif (!node.previousSibling && !node.nextSibling) {if (parentNode.tagName.toLowerCase() == 'span') {parentNode.style.backgroundColor = colorreturn}}// Create a span element around the nodevar span = document.createElement('span')span.style.backgroundColor = colorvar nextSibling = node.nextSiblingparentNode.removeChild(node)span.appendChild(node)parentNode.insertBefore(span, nextSibling)},ColorizeLeafFromTo: function (node, color, from, to) {var text = node.textContentif (!Mark.IsTextVisible(text)) returnif (from < 0) from = 0if (to < 0) to = text.lengthif (from == 0 && to >= text.length) {// to avoid unnecessary span elementsMark.ColorizeLeaf(node, color)return}var part1 = text.substring(0, from)var part2 = text.substring(from, to)var part3 = text.substring(to, text.length)var parentNode = node.parentNodevar nextSibling = node.nextSiblingparentNode.removeChild(node)if (part1.length > 0) {var textNode = document.createTextNode(part1)parentNode.insertBefore(textNode, nextSibling)}if (part2.length > 0) {var span = document.createElement('span')span.style.backgroundColor = colorvar textNode = document.createTextNode(part2)span.appendChild(textNode)parentNode.insertBefore(span, nextSibling)}if (part3.length > 0) {var textNode = document.createTextNode(part3)parentNode.insertBefore(textNode, nextSibling)}},ColorizeNode: function (node, color) {var childNode = node.firstChildif (!childNode) {Mark.ColorizeLeaf(node, color)return}while (childNode) {// store the next sibling of the childNode, because colorizing modifies the DOM structurevar nextSibling = childNode.nextSiblingMark.ColorizeNode(childNode, color)childNode = nextSibling}},ColorizeNodeFromTo: function (node, color, from, to) {var childNode = node.firstChildif (!childNode) {Mark.ColorizeLeafFromTo(node, color, from, to)return}for (var i = from; i < to; i++) {Mark.ColorizeNode(node.childNodes[i], color)}},ColorizeSelection: function (color) {if (!!window.ActiveXObject || 'ActiveXObject' in window) {document.execCommand('BackColor', false, color)return}// all browsers, except IE before version 9if (window.getSelection) {var selectionRange = window.getSelection()if (selectionRange.isCollapsed) {return}var range = selectionRange.getRangeAt(0)// store the start and end points of the current selection, because the selection will be removedvar startContainer = range.startContainervar startOffset = range.startOffsetvar endContainer = range.endContainervar endOffset = range.endOffset// because of Opera, we need to remove the selection before modifying the DOM hierarchyselectionRange.removeAllRanges()if (startContainer == endContainer) {//同一个节点时，直接标记颜色Mark.ColorizeNodeFromTo(startContainer, color, startOffset, endOffset)} else {if (startContainer.firstChild) {var startLeaf = startContainer.childNodes[startOffset]} else {//标记第一段节点var startLeaf = Mark.GetNextLeaf(startContainer)Mark.ColorizeLeafFromTo(startContainer, color, startOffset, -1)}if (endContainer.firstChild) {if (endOffset > 0) {var endLeaf = endContainer.childNodes[endOffset - 1]} else {var endLeaf = Mark.GetPreviousLeaf(endContainer)}} else {var endLeaf = Mark.GetPreviousLeaf(endContainer)Mark.ColorizeLeafFromTo(endContainer, color, 0, endOffset)}while (startLeaf) {var nextLeaf = Mark.GetNextLeaf(startLeaf)Mark.ColorizeLeaf(startLeaf, color)if (startLeaf == endLeaf) {break}startLeaf = nextLeaf}}} else {// Internet Explorer before version 9document.execCommand('BackColor', false, color)}},// 标记方法 E// 粘贴方法parsestr(dom, myValue) {if (!myValue) returnlet myField = document.getElementById(dom)//IE supportif (document.selection) {myField.focus()sel = document.selection.createRange()sel.text = myValuesel.select()}//MOZILLA/NETSCAPE supportelse if (myField.selectionStart || myField.selectionStart == '0') {var startPos = myField.selectionStartvar endPos = myField.selectionEndvar restoreTop = myField.scrollTopmyField.value =myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)if (restoreTop > 0) {myField.scrollTop = restoreTop}myField.focus()myField.selectionStart = startPos + myValue.lengthmyField.selectionEnd = startPos + myValue.length} else {myField.value += myValuemyField.focus()}},// 复制方法getSelectedText() {return window.getSelection().toString()},// 剪切方法cutstr(id){// 获取Textarea元素var textarea = document.getElementById(id);// 获取选中文本的起始和结束位置var selectionStart = textarea.selectionStart;var selectionEnd = textarea.selectionEnd;// 提取选中的文本var selectedText = textarea.value.substring(selectionStart, selectionEnd);// 删除选中的文本textarea.value = textarea.value.substring(0, selectionStart) + textarea.value.substring(selectionEnd);// 将选中的文本剪切到剪贴板document.addEventListener('cut', function(e) {// 将光标移到Textarea内部textarea.focus();e.clipboardData.setData('text/plain', selectedText);e.preventDefault();});// 执行剪切操作document.execCommand('cut');return selectedText;}
}
export default Mark

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/163936.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

K-means算法

K-means算法

K-means算法 Lloyd k-means Algorithm 样本矩阵&#xff1a; X [ x 1 , x 2 , . . . , x n ] ∈ R d n X[x_1,x_2,...,x_n] ∈R^{dn} X[x1​,x2​,...,xn​]∈Rdn&#xff0c;有n个 x i x_i xi​每个 x i x_i xi​是d维 簇集合&#xff1a; C [ C 1 , C 2 , . . . , C c …
阅读更多...
自由飞翔之小鸟

自由飞翔之小鸟

一、创建文件、包、类、插入图片文件 二、app包 1、Gameapp类&#xff08;运行游戏&#xff09; package app;import main.GameFrame;public class Gameapp {public static void main(String[] args) {//游戏的入口new GameFrame();} } 三、main包 1、Barrier&#xff08;障…
阅读更多...
【实验】配置用户自动获取IPv6地址的案例

【实验】配置用户自动获取IPv6地址的案例

【赠送】IT技术视频教程&#xff0c;白拿不谢&#xff01;思科、华为、红帽、数据库、云计算等等​编辑https://xmws-it.blog.csdn.net/article/details/117297837?spm1001.2014.3001.5502https://xmws-it.blog.csdn.net/article/details/117297837?spm1001.2014.3001.5502【…
阅读更多...
Pyqt5 设置保存上一次结果（配置文件）

Pyqt5 设置保存上一次结果（配置文件）

效果 每次打开Pyqt5打包后的程序&#xff0c;默认显示的是上一次的结果 例如下图的 文件路径、表名、类型等 大致的思路 Pyqt5自带的方法QSettings实现保存上一次的设置&#xff0c;其思路是读取ini文件&#xff0c;如果不存在就是程序的初始状态&#xff0c;如果存在则可以读取…
阅读更多...
C++程序中dump文件生成方法详解

C++程序中dump文件生成方法详解

最近项目中新作成了一个动态链接库&#xff0c;长时间运行后&#xff0c;偶尔会崩溃。根据log分析&#xff0c;被调用的动态库函数最外层catch到了这个异常&#xff0c;但是不能定位哪里出了问题。另外虽然上层exe是有dump文件输出处理的&#xff0c;但是在C中&#xff0c;如果…
阅读更多...
如何利用Python进行数据归一化？

如何利用Python进行数据归一化？

1. 知识简介 数据归一化是数据预处理的一项重要步骤&#xff0c;它对于提高模型性能、加速模型训练、避免数值计算问题以及提高模型的泛化能力都具有重要作用。进行数据归一化可以起到以下作用&#xff1a;消除量纲影响&#xff0c;加速模型收敛&#xff0c;提高模型性能&…
阅读更多...
硅谷大宽服务器：引领互联网新时代的核心技术

硅谷大宽服务器：引领互联网新时代的核心技术

在当今这个信息爆炸的时代&#xff0c;数据已经成为了企业和个人的重要资产。服务器作为数据的存储和处理中心&#xff0c;其重要性不言而喻。硅谷大宽服务器以其卓越的性能、稳定的运行和优质的服务&#xff0c;赢得了全球众多企业和个人的信赖和选择。 硅谷大宽服务器的特点…
阅读更多...
图解分库分表

图解分库分表

中大型项目中&#xff0c;一旦遇到数据量比较大&#xff0c;小伙伴应该都知道就应该对数据进行拆分了。有垂直和水平两种。 垂直拆分比较简单&#xff0c;也就是本来一个数据库&#xff0c;数据量大之后&#xff0c;从业务角度进行拆分多个库。如下图&#xff0c;独立的拆分出…
阅读更多...
Redisson分布式锁实现原理

Redisson分布式锁实现原理

Redisson主要解决一下问题 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如HashTable这样的代码中&#xff0c;他的方法都是使用synchronized修饰的&#xff0c;假如他在一个方法内&a…
阅读更多...
解决Spring Boot应用在Kubernetes上健康检查接口返回OUT_OF_SERVICE的问题

解决Spring Boot应用在Kubernetes上健康检查接口返回OUT_OF_SERVICE的问题

现象 在将Spring Boot应用部署到Kubernetes上时&#xff0c;健康检查接口/healthcheck返回的状态为{"status":"OUT_OF_SERVICE","groups":["liveness","readiness"]}&#xff0c;而期望的是返回正常的健康状态。值得注意的…
阅读更多...
VTK物体表面画贴合线条

VTK物体表面画贴合线条

1、自由画线 2、曲线拟合画线 3、三点闭合曲线
阅读更多...
Docker Compose部署微服务项目实战讲解

Docker Compose部署微服务项目实战讲解

一、Docker Compose简介 当需要在多个容器之间协调和管理应用程序时&#xff0c;Docker Compose是一个非常有用的工具。它允许通过一个配置文件来定义、配置和启动多个 Docker 容器&#xff0c;使得整个应用程序的部署变得更加简单和一致。以下是 Docker Compose 的一些重要概…
阅读更多...
Linux使用宝塔面板+Discuz+cpolar内网穿透工具搭建可公网访问论坛

Linux使用宝塔面板+Discuz+cpolar内网穿透工具搭建可公网访问论坛

Linux宝塔面板搭建Discuz论坛&#xff0c; 并内网穿透实现公网访问 文章目录 Linux宝塔面板搭建Discuz论坛&#xff0c; 并内网穿透实现公网访问前言1.安装基础环境2.一键部署Discuz3.安装cpolar工具4.配置域名访问Discuz5.固定域名公网地址6.配置Discuz论坛 前言 Crossday Di…
阅读更多...
【 图片加载】Vue前端各种图片引用

【 图片加载】Vue前端各种图片引用

文章目录 一、图片作为js常量&#xff08;常作为配置项的值 &#xff09;1、在线链接2、本地图片 二、图片img标签1、一般的src2、动态的src用require3、src可以接收二进制文件blob&#xff08;如后端返回的、a-upload传的图片) 三、背景图片 一、图片作为js常量&#xff08;常…
阅读更多...
8款那些年救过我的数据文件恢复软件 - 误删除重要文件的“后悔药”

8款那些年救过我的数据文件恢复软件 - 误删除重要文件的“后悔药”

无论您在保存备份方面多么小心&#xff0c;灾难有时还是会发生。有时您的备份软件无法按预期运行。 如果您的外部驱动器靠近您的设备&#xff0c;发生火灾/洪水/故障时&#xff0c;有时备份会与原始文件一起丢失。即使是云存储也不能避免故障。 还有一个事实是&#xff0c;我…
阅读更多...
大数据管家 DataSophon 1.2介绍

大数据管家 DataSophon 1.2介绍

DataSophon 1.2
阅读更多...
C++设计模式之工厂模式（上）——简单工厂模式

C++设计模式之工厂模式（上）——简单工厂模式

工厂模式 概述简单工厂模式介绍示例示例使用运行结果缺点 概述 工厂模式属于一种创建型设计模式。其可以分为简单工厂模式&#xff0c;工厂模式和抽象工厂模式。工厂模式分为上、中、下三篇&#xff0c;本篇主要介绍简单工厂模式。 简单工厂模式 介绍 简单工厂模式可以理解…
阅读更多...
二叉树题目：具有所有最深结点的最小子树

二叉树题目：具有所有最深结点的最小子树

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;具有所有最深结点的最小子树 出处&#xff1a;865. 具有所有最深结点的最小子树 难度 5 级 题目描述 要求 给定…
阅读更多...
HCIP-六、OSPF-2 综合实验

HCIP-六、OSPF-2 综合实验

六、OSPF-2 综合实验 实验拓扑实验需求及解法1.设备名称和部分IP地址已配置2.所有设备运行OSPF&#xff0c;进程号为13.区域间路由汇总4.外部路由汇总5.下发默认路由6. 虚链路 实验拓扑 实验需求及解法 本实验模拟OSPF综合型网络&#xff0c;按照以下需求完成实验。 1.设备名…
阅读更多...
EventLog Analyzer：强大的日志管理与分析工具

EventLog Analyzer：强大的日志管理与分析工具

随着企业网络规模的扩大和信息系统的复杂化&#xff0c;安全日志管理和分析成为了至关重要的一环。在这个背景下&#xff0c;EventLog Analyzer崭露头角&#xff0c;成为一款备受推崇的日志管理与分析工具。本文将介绍EventLog Analyzer的主要特点、功能以及为企业带来的实际价…
阅读更多...
最新文章

Copyright @ 2022~2023