如何用Javascript操作高亮显示的文本

Question

我试图创建一个所见即所得的HTML编辑器。现在我们可以将文本向左、向中、向右对齐。我想添加如果用户突出显示一些文本，并单击粗体或斜体按钮。我想把它加粗

我得到高亮显示的文本，像这样

const getHighlightedText = () => {
let text = '';
if (window.getSelection) {
text = window.getSelection().toString();
} else if (
document.selection &&
document.selection.type != 'Control'
) {
text = document.selection.createRange().text;
}
return text;
};

现在我如何在strong或em标签中添加文本。我想使用字符串替换。但是，如果我们多次使用相同的文本，它将不正确。

我该怎么做?

$(document).ready(() => {
const getHighlightedText = () => {
let text = '';
if (window.getSelection) {
text = window.getSelection().toString();
} else if (
document.selection &&
document.selection.type != 'Control'
) {
text = document.selection.createRange().text;
}
return text;
};
let activeElement = null;
$('#builder-content').on('click', (e) => {
activeElement = $(e.target);
console.log(activeElement);
});
$('#builder-align-text-left').on('click', (e) => {
if (activeElement.hasClass('text-end')) {
$(activeElement).removeClass('text-end');
}
if (activeElement.hasClass('text-center')) {
$(activeElement).removeClass('text-center');
}
activeElement.addClass('text-start');
});
$('#builder-align-text-left').on('click', (e) => {
if (activeElement.hasClass('text-end')) {
$(activeElement).removeClass('text-end');
}
if (activeElement.hasClass('text-center')) {
$(activeElement).removeClass('text-center');
}
activeElement.addClass('text-start');
});
$('#builder-align-text-center').on('click', (e) => {
if (activeElement.hasClass('text-end')) {
$(activeElement).removeClass('text-end');
}
if (activeElement.hasClass('text-start')) {
$(activeElement).removeClass('text-start');
}
activeElement.addClass('text-center');
});
$('#builder-align-text-right').on('click', (e) => {
if (activeElement.hasClass('text-center')) {
$(activeElement).removeClass('text-center');
}
if (activeElement.hasClass('text-start')) {
$(activeElement).removeClass('text-start');
}
$(activeElement).addClass('text-end');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous" />
<div class="container h-100">
<div class="row h-100">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="card">
<div class="card-body p-4">
<div id="builder-editor">
<div id="builder-content" contenteditable="true">
<h3>Heading 3</h3>
<p>
In JavaScript, when an object is passed to a function expecting a string (like window.alert() or document.write()), the object's toString() method is called and the returned value is passed to the function. This can make the object appear to be a string
when used with other functions when it is really an object with properties and methods.
</p>
</div>
</div>
</div>
<div class="card-footer">
<div class="d-flex builder-toolbar">
<button class="btn btn-light shadow-none me-3">
<i class="fas fa-bold"></i>
</button>
<button class="btn btn-light shadow-none me-3">
<i class="fas fa-italic"></i>
</button>
<button id="builder-align-text-left" class="btn btn-light shadow-none me-3">
<i class="fas fa-align-left"></i>
</button>
<button id="builder-align-text-center" class="btn btn-light shadow-none me-3">
<i class="fas fa-align-center"></i>
</button>
<button id="builder-align-text-right" class="btn btn-light shadow-none me-3">
<i class="fas fa-align-right"></i>
</button>
<button id="builder-align-text-right" class="btn btn-light shadow-none me-3">
<i class="fas fa-cloud-upload-alt"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以尝试添加strong

<button class="btn btn-light shadow-none me-3" id="builder-text-bold">
<i class="fas fa-bold"></i>
</button>
$('#builder-text-bold').on('click', (e) => {
var range;
if (window.getSelection) {
range = window.getSelection().getRangeAt(0);
} else if (document.getSelection) {
range = document.getSelection().getRangeAt(0);
} else if (document.selection) {
range = document.selection.createRange();
}
if (range != null && range != '' ) {
var newNode = $('<strong>  </strong>')[0];
range.surroundContents(newNode);
}
});