在contentEditable中将HTML转换为纯文本
在contentEditable中将HTML转换为纯文本
提问于 2013-02-28 08:21:22
我有一个contentEditable，我通过捕捉事件剥离了粘贴的内容on('paste')的格式。然后我将焦点放在一个文本区域中，将内容粘贴到其中，然后复制值。here给出了很好的答案。问题是我不能这样做：
$("#paste-output").text($("#area").val());因为这会用粘贴的文本替换我的整个内容。所以我需要将内容粘贴到插入符号的位置。我编写了一个脚本来实现这一点：
pasteHtmlAtCaret($("#area").val());
// pastes CTRL+V content at caret position
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteHTML(html);
}
}唯一的问题是它使用html变量在插入符号位置粘贴HTML内容。如何将其转换为纯文本？我尝试将jQuery .text(html)添加到variable中，但没有成功。像这样的东西可能会有帮助：
el.textContent||el.innerText;有什么想法或更好的解决方案吗？谢谢!
编辑：感谢下面的回答，我修改了我的代码并解决了这个问题。我基本上是将textarea的值复制到div中，并只获取它的.text()
// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
var text = $('<div>').html($("#area").val()).text();
pasteHtmlAtCaret(text);
}, 20);
});回答 4
Stack Overflow用户
回答已采纳
发布于 2013-06-29 02:52:02
应Jonathan Hobbs的请求，我将此作为答案发布。感谢上面的回答，我修改了我的代码并解决了这个问题。我基本上把textarea的值复制到了一个div中，只获取了它的.text()：
// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
setTimeout(function(){
var text = $('<div>').html($("#area").val()).text();
pasteHtmlAtCaret(text);
}, 20);
});Stack Overflow用户
发布于 2013-02-28 08:29:28
- 创建一个外部目录，
- 将html放入该目录，
- 从该目录复制文本并将其插入光标位置。
G29
Stack Overflow用户
发布于 2015-01-20 16:02:29
替换标签解决方案：
http://jsfiddle.net/tomwan/cbp1u2cx/1/
var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");
$plainText.on('paste', function (e) {
window.setTimeout(function () {
$plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
}, 0);
});
$linkOnly.on('paste', function (e) {
window.setTimeout(function () {
$linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
}, 0);
});
function replaceStyleAttr (str) {
return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
return b + 'style_replace' + d;
});
}
function removeTagsExcludeA (str) {
return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}
function removeAllTags (str) {
return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15125217
复制相关文章
相似问题