html div数据替换,在contenteditable div中替换innerHTML
小编典典
问题在于,Rangy的保存/恢复选择模块通过将不可见的标记元素插入到选择边界所在的DOM中来工作,然后您的代码会去除所有HTML标签,包括Rangy的标记元素(如错误消息所示)。您有两种选择:
转到DOM遍历解决方案为数字着色,而不是innerHTML。这将更可靠,但涉及更多。
实现基于字符索引的替代选择保存和还原。这通常很脆弱,但在这种情况下会做您想要的。
更新
我已经为Rangy(上面的选项2)取消了基于字符索引的选择保存/恢复。这有点粗糙,但是可以解决这种情况。它通过遍历文本节点来工作。我可以以某种形式将其添加到Rangy中。(
码:
function saveSelection(containerEl) {
var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
var sel = rangy.getSelection(), range;
function traverseTextNodes(node, range) {
if (node.nodeType == 3) {
if (!foundStart && node == range.startContainer) {
start = charIndex + range.startOffset;
foundStart = true;
}
if (foundStart && node == range.endContainer) {
end = charIndex + range.endOffset;
throw stop;
}
charIndex += node.length;
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i], range);
}
}
}
if (sel.rangeCount) {
try {
traverseTextNodes(containerEl, sel.getRangeAt(0));
} catch (ex) {
if (ex != stop) {
throw ex;
}
}
}
return {
start: start,
end: end
};
}
function restoreSelection(containerEl, savedSel) {
var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};
range.collapseToPoint(containerEl, 0);
function traverseTextNodes(node) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
throw stop;
}
charIndex = nextCharIndex;
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i]);
}
}
}
try {
traverseTextNodes(containerEl);
} catch (ex) {
if (ex == stop) {
rangy.getSelection().setSingleRange(range);
} else {
throw ex;
}
}
}
function formatText() {
var el = document.getElementById('pad');
var savedSel = saveSelection(el);
el.innerHTML = el.innerHTML.replace(/(]+)>)/ig,"");
el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"$1");
// Restore the original selection
restoreSelection(el, savedSel);
}
2020-05-01
html div数据替换,在contenteditable div中替换innerHTML相关推荐
- php中的替换函数,php字符串中替换函数是什么
php字符串中替换函数有两种,分别是:1.substr_replace函数,用于把字符串的一部分替换为另一个字符串:2.str_replace函数,能够使用一个字符串替换字符串中的另一些字符. 本文操 ...
- php 单词替换,如何在PHP中替换字符串中的单词?
给定一个包含一些单词的字符串,任务是替换PHP中给定字符串str中出现的所有单词.为了完成这项任务,我们在PHP中使用了以下方法:方法1:使用str廑replace()方法:str廑replace() ...
- java替换数据库换行,JAVA中替换字符以及回车换行
工欲善其事必先利其器 ---下面我们先了解一下,回车换行的来历 '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格.通常用的Enter是两个加起来.下面转一篇文章. 回车和换行 今天 ...
- js添加html换行符,javascript – 在contenteditable div中的输入键上插入换行符
我试图插入一个换行符,而不是当我在一个contenteditable div中输入时浏览器想要插入的内容. 我当前的代码看起来像这样: if (e.which === 13) { e.stopProp ...
- Servlet向JSP传递数据以及JSP页面DIV定时局部刷新
系列文章: ESP8266的AP模式与STA模式简单测试 简单的Java服务器和客户端的通信 STM32 ESP8266和Java服务器透传模式下的双向通信 jsp向servlet传输数据 Servl ...
- php中的div是什么意思,div是什么意思?div标签怎么用
很多刚入门的新手,对div是什么意思还不是很了解,现在很多网站上都有div,那么究竟div是什么意思?下面我们来总结一下div标签怎么用. 一:div是什么意思 我们随便打开一个网页源代码就会发现里面 ...
- css设置一个div显示在另一个div的上层_CSS工程中常见问题-1
1. 图片下方会产生几像素的空白 代码: // html <div class="zls"><img src="../imgs/zls.jpg" ...
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
最新文章
- Swift 中使用 SQLite——新增数据
- 经典常用算法/常用算法思维---附伪代码以及实现
- dedecms arclist中截取字符串的方法
- 简单可行性报告模板_项目可行性报告模板分享!第三章主要内容
- WebBrowser的Cookie操作
- Python学习笔记之Windows下通过pip安装Django详细介绍
- 【Spark Summit EU 2016】使用参数服务器在Spark上扩展因式分解机
- go语言strings包
- python list的+=操作
- java 库知乎_基于原生Java API爬取最新版本知乎百万用户数据
- android 百度地图公交路线,android百度地图之公交线路详情搜索
- WordPress安装时未选择语言导致变成英文无法修改成中文
- How to change the implementation (detour) of an externally declared function
- 一些基本 的数学知识
- 【转】提高MATLAB运行效率
- 多核cpu与多线程理解
- [心得]google软件工程师技术准备
- 基于Android应用《玩转英语》(总报告)
- 爱立信高级副总裁柯瑞东:爱立信的“中国任务”
- Cant bind to ngModel since it isnt a known property of input.ngtsc(-998002) app.component.ts(8, 7):