如何找到从 textContent 突出显示的文本的 innerHTML 索引？

Question

我正在尝试编写一个简单的文本编辑器来取乐。 我被困在这个问题上。 我想在单击按钮时为突出显示的文本添加粗体或斜体。 我认为最好的方法是获取所选文本的索引，然后在 innerHTML 中的标签周围添加粗体标签/斜体标签。 但是，我似乎无法将所选标签的 position / 索引转移到 innerHTML。 显然，innerHTML 代码被标签偏移了。 有没有更简单的方法来做到这一点？

我虽然找到突出显示文本的索引是 go 的方式。 好的。 不幸的是， indexOf 只会找到第一次出现。

 var word_document = document.getElementById('word-document'); /* This code is for our bold button */ var bold_button = document.getElementById('bold-button') bold_button.addEventListener('click', (event) => { /* Test to see if text is highlighted */ let text = window.getSelection().toString(); console.log("Selected Text: " + text); if (text.length > 0) { // Find the position of the highlighted text in the word document. let position = word_document.innerHTML.indexOf(text); // Not a good way of doing it console.log("Pos: ", position); // Replace the highlighted text from the document with the bold text word_document.innerHTML.replace(text, "<b>" + text + "</b>"); } /* If text is not highlighted, add a bold tag */ else { // Add bold tag to bottom of document word_document.focus(); word_document.innerHTML += "<b></b>"; word_document.selectionEnd = word_document.innerHTML.length - 6; } }); /* This code is for our italic button */ var italic_button = document.getElementById('italics-button'); italic_button.addEventListener('click', function() { let text = window.getSelection().toString(); // Same issue });

 <button id="bold-button">B</button> <button id="italics-button">I</button> <textarea id="word-document">Starting Text</textarea>

我想一种可能的方法是遍历 textContent 并查找所选文本之前的任何文本是否与它匹配，然后设置一个变量以跳过那么多匹配项。 有没有更简单的方法来做到这一点。 理想情况下，我想以更合适的方式创建一个粗体标签或斜体标签和 append 到文本区域。 我支持遍历 DOM 可能是更好的方法。 关于如何更容易解决这个问题的任何想法？ 谢谢

我使用普通/香草 Javascript。

编辑：固定代码。 在此处添加 JsFiddle

Answer 1

你可以试试这个：

 <html> <header> </header> <body> <button id="bold-button" onClick="makeBold()">B</button> <div id="word-document" contenteditable>Starting Text</div> <script> function makeBold() { var inputText = document.getElementById("word-document"); var innerHTML = inputText.innerHTML; text = window.getSelection().toString(); var index = innerHTML.indexOf(text); if (index >= 0) { innerHTML = innerHTML.substring(0,index) + "<span style='font-weight: bold;'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length); inputText.innerHTML = innerHTML; } } </script> </html>

这里的想法是使用内容可编辑的假 textArea: div。 希望对你有帮助

祝你好运！

Answer 2

简单的虚拟解决方案。 这不适用于嵌套标签。

我强烈建议阅读本教程

 function action({tag, classes}, event){ const text = document.getElementById("word-document"); const selection = window.getSelection(); const range = selection.getRangeAt(0); const before = text.innerHTML.substr(0, range.startOffset); const after = text.innerHTML.substr(range.endOffset); const selected = text.innerHTML.substr(range.startOffset,range.endOffset - range.startOffset ); const warpped = `<${tag} ${classes? "class=" + classes: ""}>${selected}</${tag}>` text.innerHTML = before + warpped + after; }

 #word-document { border: 1px solid black; padding: 10px; }.underline{ text-decoration-line: underline; }

 <button onclick="action({tag: 'b'})">B</button> <button onclick="action({tag: 'i'})">I</button> <button onclick="action({tag: 'span', classes:'underline'})">Under score</button> <div id="word-document" contenteditable>Starting Text</div>

如何找到从 textContent 突出显示的文本的 innerHTML 索引？

问题描述

2 个解决方案

解决方案1
0 2020-12-17 16:57:21

解决方案2
0 2020-12-17 21:49:41

如何找到从 textContent 突出显示的文本的 innerHTML 索引？

问题描述

2 个解决方案

解决方案1 0 2020-12-17 16:57:21

解决方案2 0 2020-12-17 21:49:41

解决方案1
0 2020-12-17 16:57:21

解决方案2
0 2020-12-17 21:49:41