window.getSelection()如何根据开始位置和结束位置添加标签
//IE支持的range对象
var ie_range ;
//其他浏览器的range对象
var other_range ;
if(window.getSelection) {
other_range = window.getSelection().getRangeAt(0);
}
else if(document.selection && document.selection.createRange) {
ie_range = document.selection.createRange();
}
if(other_range) {
var selected = other_range.extractContents().textContent;
var text = "[ins id='"+(new Date().getTime())+"' comment='"+value+"']"+selected+"[/ins]";
var textNode = document.createTextNode(text);
other_range.insertNode(textNode);
var content = $(".content").html();
var reg = /\[ins id='(\d*)' comment='([\w\W]*)']([\w\W]*)\[\/ins]/gi;
reg.test(content);
var id = RegExp.$1,
comment = RegExp.$2,
c = RegExp.$3;
var reHtml = "<ins id='"+id+"' comment='"+comment+"' class='postil' >"+c+"</ins>";
content = content.replace(reg, reHtml);
$(".content").html(content);
}
else if(ie_range) {
ie_range.pasteHTML("<ins comment='"+value+"' class='postil' id='"+new Date().getTime()+"'>"+ie_range.htmlText+"</ins>");
ie_range=null;
}
});
}
问题1:上文是根据鼠标选中获取文本的值的方法,但针对一篇文本存在多段的情况,多段选中时如何不合并成一行呢?
问题2:如何能直接根据开始位置和结束位置定义标签添加背景颜色呢?
相关推荐
Js 载入时选中文字的实现代码
豪情提示:这里是测试文本,初始时会被选中滴~!! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
parse-window.getSelection:一种使用html5窗口选择API解析window.getSelection的方法
parse-window.getselection 解析窗口获取选择,以获取选择内的文本和其他有用信息。 用法 import parseNodes from "parse-window.getselection" ; const parseNodes = parseNodes ( ) ; 示例演示代码: import React , { Component } from "react" ; import parseNodes from "parse-window.getselection" ; class App extends Component { constructor ( ) { super ( ) ; this . state = { parsedNodes : [ ] } ;
vue项目中在可编辑div光标位置插入内容的实现代码
主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍,有需求的朋友可以参考
js移动焦点到最后位置的简单方法
当输入框(input/textarea)获得焦点时,将焦点移动到最后,在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。 代码如下: var el = document.getElementById('txtArticle'); var range = el.createTextRange(); range.moveStart('character', el.value.length); range.collapse(false); range.select(); 其实可以将moveStart这行删除,因为createTextRange方法创建range后,利用collaps


