如何在javascript中选择粗体/斜体/下划线的文本？

Question

I'm trying to work on a webpage that allows users to write their own notes for a school project, and my idea was to let them bold/italicize/underline their text using buttons. 我正在尝试在允许用户为学校项目编写自己的笔记的网页上工作，我的想法是让他们使用按钮粗体/斜体/突出显示他们的文本。 As of now, the buttons are working, but they bold/italicize/underline everything inside the text area. 截至目前，按钮正在工作，但它们粗体/斜体/突出显示文本区域内的所有内容。 Instead, I want it to work in such a way that only the text they highlight gets bold/italicized/underlined. 相反，我希望它以这样的方式工作，即只有它们突出显示的文本才会变为粗体/斜体/下划线。 I'd also like to know how to make it so that when they click the bold button, text that they type from then onwards will come out bold, and when they click it again, the text that is typed from then onwards will come out normal. 我也想知道如何制作它，以便当他们点击粗体按钮时，他们从那时开始输入的文字将变为粗体，当他们再次点击它时，从那时开始输入的文本将会出现正常。

<script type="text/javascript">
function boldText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontWeight == "bolder" ) {
        target.style.fontWeight = "normal";
    } else {
        target.style.fontWeight = "bolder";
    }
}



function italicText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontStyle == "italic" ) {
        target.style.fontStyle = "normal";
    } else {
        target.style.fontStyle = "italic";
    }
}

function underlineText(){
    var target = document.getElementById("TextArea");
    if( target.style.textDecoration == "underline" ) {
        target.style.textDecoration = "none";
    } else {
        target.style.textDecoration = "underline";
    }
}
</script>

Answer 1

You can use execCommand() . 您可以使用execCommand() 。 This API was meant for developing text editors. 此API用于开发文本编辑器。 The 3 buttons utilize the very versatile execCommand() and the writing element is a plain div enabled with the attribute contenteditable . 3个按钮使用非常通用的execCommand() ，而write元素是一个普通的div，具有属性contenteditable 。

SNIPPET SNIPPET

 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <style> body { font: 400 16px/1.4 'serif'; } #editor1 { border: 3px inset grey; height: 100px; width: 381px; margin: 10px auto 0; } fieldset { margin: 2px auto 15px; width: 358px; } button { width: 5ex; text-align: center; padding: 1px 3px; } </style> </head> <body> <div id="editor1" contenteditable="true"> The quick brown fox jumped over the lazy dog. </div> <fieldset> <button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i> </button> <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b> </button> <button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u> </button> </fieldset>

Answer 2

Textarea does not allow such things. Textarea不允许这样的事情。 I would suggest you to use something like ckeditor . 我建议你使用像ckeditor这样的东西。 It will do the job for you neatly. 它会整齐地为你完成这项工作。 But if you still want to do it yourself, you need to use a div with contenteditable tag. 但是如果你仍然想自己做，你需要使用带有contenteditable标签的div 。

Good Luck ! 祝好运！

Answer 3

With textarea you cannot achieve that, use divs instead, so you can do something like this: 使用textarea你无法实现，改为使用divs ，所以你可以这样做：

 $(document).ready(function(){ $('.boldText').click(function(){ $('.container').toggleClass("bold"); }); $('.italicText').click(function(){ $('.container').toggleClass("italic"); }); $('.underlineText').click(function(){ $('.container').toggleClass("underline"); }); });

 div.container { width: 300px; height: 100px; border: 1px solid #ccc; padding: 5px; } .bold{ font-weight:bold; } .italic{ font-style :italic; } .underline{ text-decoration: underline; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container" contentEditable></div><br/> <input type="button" class="boldText" value="Bold"> <input type="button" class="italicText" value="Italic"> <input type="button" class="underlineText" value="Underline">

如何在javascript中选择粗体/斜体/下划线的文本？

问题描述

3 个解决方案

解决方案1
5 已采纳 2016-07-06 08:11:12

SNIPPET SNIPPET

解决方案2
1 2016-07-06 07:22:26

解决方案3
0 2016-07-06 07:41:00

如何在javascript中选择粗体/斜体/下划线的文本？

问题描述

3 个解决方案

解决方案1 5 已采纳 2016-07-06 08:11:12

SNIPPET SNIPPET

解决方案2 1 2016-07-06 07:22:26

解决方案3 0 2016-07-06 07:41:00

解决方案1
5 已采纳 2016-07-06 08:11:12

解决方案2
1 2016-07-06 07:22:26

解决方案3
0 2016-07-06 07:41:00