gpt4 book ai didi

javascript - 检测文本是否为粗体

转载 作者:行者123 更新时间:2023-11-30 23:44:55 25 4
gpt4 key购买 nike

我正在尝试制作一个所见即所得编辑器,到目前为止我已经有了它,因此您可以选择文本并单击“设为粗体”以使所选文本变为粗体。它实际上只是将 < b> (无空格)标签包裹在所选文本周围。但我的问题是,如果我想取消粗体,我的脚本就会遇到一些麻烦......

到目前为止,这是我的脚本:

<script language="javascript">
function format(tag) //defines function format
{
var editor = document.getElementById('editor');
var txt = '';
var tester = document.getElementById('tester');
if (window.getSelection) //if your browser uses this method of text selection
{
txt = window.getSelection();
}
else if (document.getSelection) //if your browser uses this method of text selection
{
txt = document.getSelection();
}
else if (document.selection) //if your browser uses this method of text selection
{
txt = document.selection.createRange().text;
}
else return; //Return this
matched = editor.innerHTML.match(txt); //Find the selected text in the editor
// if (matched.style.font-weight = "600") {tester.innerHTML = "already bold";} //if the selected text is bold, say 'already bold' DOES NOT WORK
// else {tester.innerHTML = "not bold";} //if it doesn't...
editor.innerHTML = editor.innerHTML.replace(matched,"<"+tag+">"+matched+"</"+tag+">");//Wrap <b> tags around it
}
</script>
<input type="button" value="Make Bold" onmousedown="format('b')">
<input type="button" value="Make Italic" onmousedown="format('i')">
<div id='editor' onclick="javascript:this.designMode='on';" designmode="on" contenteditable="true">Edit Box</div>

<span id="tester">testing span</span>

如果您尝试一下,您可以在该框中键入内容并选择文本,然后单击“设为粗体”,它将变为粗体。现在再次单击“加粗”,但没有任何反应。它只是在所选文本周围添加另一个 < b> 标记。我想让它变得不大胆;正常。

我该怎么做?

谢谢:)

最佳答案

将 HTML 作为字符串来处理是一个坏主意。有两个更好的选择:第一个是获取包含当前用户选择的元素,并使用 DOM 方法和属性(例如 parentNode)来测试它是否为粗体。这对于跨浏览器来说是很棘手的。使用 documentexecCommand 方法要容易得多,它会自动切换粗体。所有主要浏览器的最新版本都支持它。

document.execCommand("bold", false, null);

更新

请注意,在 Firefox(可能还有其他浏览器)中,除非文档已打开 designMode,否则这不会产生任何效果。这是一个完整的例子。突出显示一些文本并按 Ctrl-B:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.onload = function() {
document.designMode = "on";
};

function keyDown(evt) {
if (evt.keyCode == 66 && evt.ctrlKey) {
document.execCommand("bold", false, "");
}
return false;
}
</script>
</head>
<body onkeydown="return keyDown(event);">
<div>I like tea <b>with milk</b></div>
</body>
</html>

关于javascript - 检测文本是否为粗体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3326713/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com