CODEWITHSUNDEEP
javascriptjquery
user4419336
user4419336

Reputation:

Removing new line under link in textarea

When I create a new link for my textarea it creates a new line like

[enter link description here][1] and [enter link description here][2]

   [1]: http://

   [2]: http://

As you can see above there is a gap between the bottom two links I don't want the gap there

It should look like

[enter link description here][1] and [enter link description here][2]

   [1]: http://
   [2]: http://

Question how to make it so when create new link that there are no gaps for the bottom links.

Here is a codepen demo has been updated with working code

<script type="text/javascript">
$('#myLink').on('shown.bs.modal', function() {
    var textarea = document.getElementById("message");
    var len = textarea.value.length;
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var selectedText = textarea.value.substring(start, end);
    $('#title').val(selectedText);
    $('#url').val('http://');
});  

$('#save').on('click', function(e) {
    var textarea = document.getElementById("message");
    var len = textarea.value.length;
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var selectedText = textarea.value.substring(start, end);
    var counter = findAvailableNumber(textarea);

    if ($.trim($('#title').val()).length == 0){
        var replace_word = '[enter link description here]' + '[' + counter + ']';
    } else {
        var replace_word = '[' + $(this).val() + ']' + '[' + counter + ']';
    }

    var add_link = '\n\n' + '   [' + counter + ']: ' + $('#url').val();

    textarea.value = textarea.value.substring(0, start) + replace_word + textarea.value.substring(end,len) + add_link;
}); 

function findAvailableNumber(textarea){
    var number = 1;

    var a = textarea.value;

    if(a.indexOf('[1]') > -1){

        //Find lines with links

        var matches = a.match(/(^|\n)\s*\[\d+\]:/g);

        //Find corresponding numbers

        var usedNumbers = matches.map(function(match){
            return parseInt(match.match(/\d+/)[0]); }
        );

        //Find first unused number

        var number = 1;

        while(true){

            if(usedNumbers.indexOf(number) === -1){

                //Found unused number

                return number;
            }

            number++;
        }
    }

    return number;
}
</script>

Upvotes: 0

Views: 53

Answers (1)

theKidOfArcrania
theKidOfArcrania

Reputation: 498

I think your code at:

var add_link = '\n\n' + '   [' + counter + ']: ' + $('#url').val();

should instead be

if (counter == 1)
    var add_link = '\n\n' + '   [' + counter + ']: ' + $('#url').val();
else
    var add_link = '\n' + '   [' + counter + ']: ' + $('#url').val();

so that there is no gap between links, except between the text and link. Since the links should be next to each other (see assumption below), only the first link should have a gap

ASSUMPTION: I'm assuming there shouldn't be any text after the links.

Upvotes: 1

Related Questions