Utilizing Jquery to Integrate Hashtags

Question

Utilizing Jquery to Integrate Hashtags

I'm looking to implement a feature where any text I write starting with a # symbol automatically changes color to blue, and then returns to black once I hit the space key to end the text. I attempted to achieve this using the following logic within a contenteditable div:

    if (# is pressed) 
    hashtagging = true
    append "<span>" to div

    if (space is pressed and hashtagging is true) 
    hashtagging = false
    append "</span>" to div

However, this approach is not functioning as intended.

javascript jquery css

Answer 1

Answer №1

To achieve the desired outcome, consider implementing the following code snippet:

$(function() {

    var hashtags = false;

    $(document).on('keydown', '#myInputField', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                input_field.val(input_field.val() + "<span class='highlight'>");
                hashtags = true;
                break;
            case arrow.space:
                if(hashtags) {
                    input_field.val(input_field.val() + "</span>");
                    hashtags = false;
                }
                break;
        }

    });

});

This code snippet monitors keydown events to detect the pressing of either hashtag or space keys, subsequently appending a span element with a designated CSS class for styling purposes. The decision to evaluate keydown events instead of keyup events is to ensure that the tags are inserted prior to the input being registered in the text field. It showcases the usage of a text field as the input mechanism, but feel free to customize it according to your requirements.

Answer 2

To achieve the desired outcome, consider implementing the following code snippet:

$(function() {

    var hashtags = false;

    $(document).on('keydown', '#myInputField', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                input_field.val(input_field.val() + "<span class='highlight'>");
                hashtags = true;
                break;
            case arrow.space:
                if(hashtags) {
                    input_field.val(input_field.val() + "</span>");
                    hashtags = false;
                }
                break;
        }

    });

});

This code snippet monitors keydown events to detect the pressing of either hashtag or space keys, subsequently appending a span element with a designated CSS class for styling purposes. The decision to evaluate keydown events instead of keyup events is to ensure that the tags are inserted prior to the input being registered in the text field. It showcases the usage of a text field as the input mechanism, but feel free to customize it according to your requirements.

Answer 3

Answer №2

Check out this effective demonstration, where Sondre's solution is combined with Mr_Green's solution (Set the caret position always to end in contenteditable div) to move the caret to the end.

http://jsfiddle.net/344m4/1/

var hashTagList = [];

function logHashList(){
    hashTagList = [];
    $('.highlight').each(function(){
        hashTagList.push(this.innerHTML);
    });
    for(var i=0;i&lt;hashTagList.length;i++){
        alert(hashTagList[i]);
    }
    if(hashTagList.length==0){
        alert('You have not typed any hashtags');
    }
}
$(function() {

    var hashtags = false;

    $(document).on('keydown', '#example-one', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                e.preventDefault();
                input_field.html(input_field.html() + "<span class='highlight'>#");
                placeCaretAtEnd(this);
                hashtags = true;
                break;
            case arrow.space:       
                if(hashtags) {         
                    e.preventDefault();
                    input_field.html(input_field.html() + "</span>&nbsp;");    
                    placeCaretAtEnd(this);
                    hashtags = false;
                }
                break;
        }

    });

});


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Answer 4

Check out this effective demonstration, where Sondre's solution is combined with Mr_Green's solution (Set the caret position always to end in contenteditable div) to move the caret to the end.

http://jsfiddle.net/344m4/1/

var hashTagList = [];

function logHashList(){
    hashTagList = [];
    $('.highlight').each(function(){
        hashTagList.push(this.innerHTML);
    });
    for(var i=0;i&lt;hashTagList.length;i++){
        alert(hashTagList[i]);
    }
    if(hashTagList.length==0){
        alert('You have not typed any hashtags');
    }
}
$(function() {

    var hashtags = false;

    $(document).on('keydown', '#example-one', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                e.preventDefault();
                input_field.html(input_field.html() + "<span class='highlight'>#");
                placeCaretAtEnd(this);
                hashtags = true;
                break;
            case arrow.space:       
                if(hashtags) {         
                    e.preventDefault();
                    input_field.html(input_field.html() + "</span>&nbsp;");    
                    placeCaretAtEnd(this);
                    hashtags = false;
                }
                break;
        }

    });

});


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Utilizing Jquery to Integrate Hashtags

Answer №1

Answer №2

Similar questions

the combination of class and type functions as a jquery selector

Unable to view new content as window does not scroll when content fills it up

Creating dynamic images in Node.js using JavaScript without relying on HTML5 canvas

Is there a way to prevent javascript from automatically inserting tags when selecting text?

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

Exploring JSON parsing using javascript?

Achieving a 100% height sidebar that remains visible on the screen at all times in Bootstrap

javascript ondrag while self-pressing

"Exploring the world of Reactstrap: A

Best practices for storing non-reactive and static data in a Vue application

Adding items dynamically to a React-Bootstrap accordion component can enhance the user experience and provide a

jQuery body background changer/utilizer

Unable to retrieve the present aria-pressed value using the .attr() method

I'm curious, are there any html rendering engines that can display text-based content using curl-php?

unique map customized in a separate browser window

How can I generate a list of JavaScript files to be included in a template for both production and development environments using Grunt?

What is the best way to extract the value from a Material UI Slider for utilization?

Creating Test Cases for Service Response Validation

Creating dynamic routes in express to enable flexible and customizable paths

Using a wildcard (*) to select elements with JQuery