Question

我知道很多人都发布了这个确切的问题，但他们似乎都没有帮助我。我是Javascript的新手，我正在尝试编写一个函数，在Textarea中为突出显示的文本添加标签。

现在我的问题是它实际上不会将标签放在文本周围。这是我的代码：

HTML：

<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />

JS：

function formatText(tag) {
    var myTextArea = window.getSelection();
    var myTextAreaValue = myTextArea.toString();
    var updatedText = '<'+tag+'>' + myTextAreaValue + '</'+tag+'>';
    myTextArea.value = updatedText;
}

或只是Fiddle。现在为什么它不会把标签放在我不知道的文本周围。请帮帮我！ :)这里有一个新的Javascript（呃），它与PHP不太相似......

Answer 1

您可以使用以下功能（https://stackoverflow.com/a/14056768/1845408）来获取所选文本：

$('input:button').click(function () {
    var myTextAreaValue = $('#my_textarea').val();
    var selectedText = getInputSelection($('#my_textarea'));
    var updatedText = '<' + $(this).val() + '>' + selectedText + '</' + $(this).val() + '>';
    myTextAreaValue = myTextAreaValue.replace(selectedText, updatedText);
    $('#my_textarea').val(myTextAreaValue)
});


function getInputSelection(elem) {
    if (typeof elem != "undefined") {
        s = elem[0].selectionStart;
        e = elem[0].selectionEnd;
        return elem.val().substring(s, e);
    } else {
        return '';
    }
}


<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="b" />
<input type="button" value="i" />
<input type="button" value="u" />

演示：https://jsfiddle.net/erkaner/0uoshu0s/3/

Answer 2

BTW适合任何阅读此内容的人。 .click真的很老了，而且更新的.on是最好的方式，因为它涵盖了任何可能发生的事件！

我不确定它应该完成的是什么，但是我可以直接告诉你它没有向myTextArea设置任何东西，而另一件事是它一旦确实更新了该变量是应该对该变量做些什么，或者只是保留一个变量并保存数据。另外，为了好玩，每次想要更改代码时都不要忘记运行。

我在这里首先注意到的是你正试图重新发明轮子：

如果你想做这样的事情那么你应该使用库。他们会减轻您的工作负担，让您担心完成工作的逻辑。
JQuery：您应该首先考虑它，因为它是您可以使用的众多功能强大的Web库之一。
调试：

console.log（所有的东西!!!）;

您应该在浏览器附带的开发人员工具中使用控制台。在ie或chrome上按f12并单击控制台以查看输出的日志。我知道Mozilla也有一个但不确定按钮打开它。如果我需要调试，我可以自动打开我的设置。

Here is a pattern that you can use.我已经在外部依赖项选项卡中包含了jquery库。大胆永远不会有效。 html标签是。

这是我们的HTML。

<textarea id="my_textarea" name="my_textarea"></textarea>
<br />
<input type="button" value="b"  id="boldButton"/>
<input type="button" value="italic" id="italicButton" />
<input type="button" value="underline" id="underlineButton" />

这是我们的JS。

// this is "The Standard" and up to date way of doing 
// it to make sure we don't update anything before the page has rendered.
$(document).ready(function(){ 
    $( "#boldButton" ).on( "click", function() {
        console.log("start");
        var myTextAreavalue = "";     
        myTextAreavalue = $("textarea#my_textarea").val();
        console.log(typeof myTextAreavalue);
        var tag = $("input").val();
        console.log(typeof tag);
        var updatedText = ["<" + tag + ">" + myTextAreavalue + "</"+tag+">"];
        $("#my_textarea").replaceWith(updatedText[0]);
        console.log(updatedText);
    });
});

从那里我可能会改变这个事件。点击每个按钮时点击工作如果这不能与其他有很多按钮的代码一起使用。然后使用if else查看单击了哪个按钮，并在其中更改每个按钮的数据。乐于帮助！玩JS吧！当你开始研究已经为你准备好的所有车轮时它会如此强大！

将标签添加到JS中的突出显示文本不起作用

2 个答案: