javascript - replace.innerText 移动 div position - replacing .innerText moves div position

Javascript.querySelector 查找<div>通过 innerTEXT</div><div id="text_translate"><p> 如何找到带有特定文本的 DIV？例如：</p><pre> <div> SomeText, text continues. </div></pre><p> 尝试使用这样的东西：</p><pre> var text = document.querySelector('div[SomeText*]').innerTEXT; alert(text);</pre><p> 但当然它不会起作用。我该怎么做？</p></div> - Javascript .querySelector find <div> by innerTEXT

按字符位置定位节点（相对于 innerText 的位置） - Locate node by character position(position relative to innerText)

用智能引号替换哑引号，并在contenteditable div中保持插入符号位置 - Replacing dumb quotes with smart quotes and keeping caret position in contenteditable div

更换innerHTML时修复cursor position<div contenteditable="“true”"></div><div id="text_translate"><p> 在<div id="richTextBox" contenteditable="true"></div>内键入内容时，将 cursor 保持在正确位置的最佳方法是什么？更换 innerHTML 的行为搞砸了 cursor position。</p><p> 我更改 innerHTML 的原因是我添加了<span>标签。它是代码高亮程序的一部分。跨度标签允许我放置正确的颜色亮点。</p><p> 我目前正在使用 StackOverflow 答案中的以下代码作为创可贴，但它有一个重大错误。如果您按<em><strong>Enter</strong></em> ，则 cursor 将停留在旧位置，或者转到随机位置。那是因为该算法从 cursor 开始计算了多少个字符。但它不将 HTML 标记或换行符算作字符。而richTextBox 插入<br>进入。</p><p> 修复思路：</p><ul><li> 修复下面的代码？见<a href="https://jsfiddle.net/AdmiralAkbar2/jou3vq9w/12/" rel="nofollow noreferrer">小提琴</a></li><li>用更简单的代码替换？我尝试了一堆更简单的东西，涉及window.getSelection()和document.createRange() ，但我无法让它工作。</li><li> 替换为没有此错误的richTextBox 库或模块？</li></ul><h2> 截屏</h2><p><a href="https://i.stack.imgur.com/6dlqV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6dlqV.png" alt="在 JSFiddle 中呈现的richTextBox 的屏幕截图"></a> </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> // Credit to Liam (Stack Overflow) // https://stackoverflow.com/a/41034697/3480193 class Cursor { static getCurrentCursorPosition(parentElement) { var selection = window.getSelection(), charCount = -1, node; if (selection.focusNode) { if (Cursor._isChildOf(selection.focusNode, parentElement)) { node = selection.focusNode; charCount = selection.focusOffset; while (node) { if (node === parentElement) { break; } if (node.previousSibling) { node = node.previousSibling; charCount += node.textContent.length; } else { node = node.parentNode; if (node === null) { break; } } } } } return charCount; } static setCurrentCursorPosition(chars, element) { if (chars >= 0) { var selection = window.getSelection(); let range = Cursor._createRange(element, { count: chars }); if (range) { range.collapse(false); selection.removeAllRanges(); selection.addRange(range); } } } static _createRange(node, chars, range) { if (.range) { range = document.createRange() range;selectNode(node). range,setStart(node; 0). } if (chars.count === 0) { range,setEnd(node. chars;count). } else if (node && chars.count >0) { if (node.nodeType === Node.TEXT_NODE) { if (node.textContent.length < chars.count) { chars.count -= node.textContent;length. } else { range,setEnd(node. chars;count). chars;count = 0; } } else { for (var lp = 0. lp < node.childNodes;length. lp++) { range = Cursor._createRange(node,childNodes[lp], chars; range). if (chars;count === 0) { break; } } } } return range, } static _isChildOf(node; parentElement) { while (node.== null) { if (node === parentElement) { return true; } node = node;parentNode. } return false, } } window.addEventListener('DOMContentLoaded'; (e) => { let richText = document.getElementById('rich-text'), richText.addEventListener('input'; function(e) { let offset = Cursor.getCurrentCursorPosition(richText). // Pretend we do stuff with innerHTML here. The innerHTML will end up getting replaced with slightly changed code; let s = richText.innerHTML; richText.innerHTML = ""; richText.innerHTML = s, Cursor;setCurrentCursorPosition(offset. richText); richText;focus(); // blinks the cursor }); });</pre><pre class="snippet-code-css lang-css prettyprint-override"> body { margin: 1em; } #rich-text { width: 100%; height: 450px; border: 1px solid black; cursor: text; overflow: scroll; resize: both; /* in Chrome, must have display: inline-block for contenteditable=true to prevent it from adding <div> <p> and <span> when you type. */ display: inline-block; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <p> Click somewhere in the middle of line 1. Hit enter. Start typing. Cursor is in the wrong place. </p> <p> Reset. Click somewhere in the middle of line 1. Hit enter. Hit enter again. Cursor goes to some random place. </p> <div id="rich-text" contenteditable="true">Testing 123<br />Testing 456</div></pre></div></div><p></p><h2> 浏览器</h2><p>谷歌浏览器 v83，Windows 7</p></div> - Fix cursor position when replacing innerHTML of <div contenteditable=“true”>

replace.innerText 移动 div position

问题描述

1 个解决方案

解决方案1
2 2021-12-28 16:25:31

replace.innerText 移动 div position

问题描述

1 个解决方案

解决方案1 2 2021-12-28 16:25:31

解决方案1
2 2021-12-28 16:25:31