javascript - 在 JS 中向突出显示的文本添加标签不起作用

Question

我知道很多人都提出了这个确切的问题，但他们似乎都没有帮助我。我对 Javascript 很陌生，我正在尝试编写一个函数，将标签添加到文本区域中突出显示的文本。

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

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/