我怎样才能获得角色before AND after选定的文本，然后删除它们？或者更确切地说，如果所选文本在字符内，请删除周围的字符，这样如果有任何额外的空格，字符仍将被删除。
例如，双击文本时，它将选择文本，但不会选择前后的反引号。然后我想删除那些反引号。
我可以在选择中添加字符，但是当仅选择文本而不选择额外字符时，我不知道如何删除它们。
$(document).on('click', 'button', function(e) {
var target = $(this).attr('class');
var str = window.getSelection();
var text = str.toString().trim();
var l = text.length;
if ($(str.baseNode).closest('.input').length > 0) {
switch (target) {
case 'test':
if ((text.charAt(0) != "`" && text.charAt(l - 1))) {
var replacementText = "`" + text + "` ";
} else {
var rid = text.replace(/`/g, '');
var replacementText = rid + ' ';
}
break;
}
formatSelection(str, text, replacementText);
}
});
// format with buttons
function formatSelection(str, text, replacementText) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(replacementText));
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = replacementText;
}
}
.input {
border: 1px solid #ccc;
padding: 10px;
}
p {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="test">format</button>
<div contenteditable="true" class="input">
`text`
</div>
我建议使用普通 JS 的不同方法，请参阅代码片段中的注释：
var newText;
const elem = document.querySelector('.input');
document.querySelector('.test').addEventListener('click', e => {
// get the content of the div
const text = elem.innerHTML;
// get the selection, in a string format, trim the white spaces
const selection = window.getSelection();
const selectionContent = selection.toString().trim();
// if there's a word selected
if (selectionContent) {
const range = selection.getRangeAt(0)
// selected line
const line = range.startContainer.data;
// indexes of the section
const startIndex = range.startOffset;
const endIndex = range.endOffset;
// check if the backticks are included in the selection
const backticksIncluded = selectionContent.match(/\`.*?\`/g) ? true : false;
// check if the selected word is wrapped with backticks
const hasBackticks = backticksIncluded || "`" + selectionContent + "`" === line.slice(startIndex - 1, endIndex + 1);
// check if the selection has a space in the end
const space = selection.toString().endsWith(" ") ? " " : "";
if (hasBackticks) {
// if the selected text with backticks is found,
// replace it with the original selection ( without backticks)
const startContent = line.slice(0, startIndex - (backticksIncluded ? 0 : 1));
const endContent = line.slice(endIndex + (backticksIncluded ? 0 : 1));
const newWord = backticksIncluded ? selectionContent.slice(1, -1) : selectionContent
newText = startContent + newWord + space + endContent;
} else {
// if it doesn't have backticks,
// replace the selected text with the one having backticks
const startContent = line.slice(0, startIndex);
const endContent = line.slice(endIndex);
newText = startContent + "`" + selectionContent + "`" + space + endContent;
}
// set the new content to the div
elem.innerHTML = elem.innerHTML.replace(line.trim(), newText);
}
});
<button class="test">format</button>
<div contenteditable="true" class="input">hello `text` hello world</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
