Добавление тегов в выделенный текст в JS не работает

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, и еще одна вещь заключается в том, что после того, как он обновит эту переменную, он должен сделать что-то с этой переменной или просто оставить переменную с сохраненными в ней данными. Также для развлечения не забывайте запускать каждый раз, когда вы хотите изменить код.

1. Первое, что я замечаю здесь в том, что вы пытаетесь изобрести колесо:

   Если вы хотите сделать что-то вроде этого просто, то вы должны использовать библиотеки. Они отвлекут рабочую нагрузку и позволят вам беспокоиться о логике выполнения работы.

2. JQuery: это то, где вы должны смотреть первым, поскольку это одна из многих и наиболее мощных веб-библиотек в вашем распоряжении.

3. Debugging:

   console.log (все вещи !!!);

Вы должны использовать консоль в инструментах разработчика, которые поставляются с вашим браузером. нажмите 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 if, чтобы увидеть, какая кнопка была нажата, и изменить данные на каждом из них. Рад был помочь! Получайте удовольствие от JS! Это настолько мощно, когда вы начинаете изучать все колеса, которые уже собраны для вас!