How to set text-decoration: underline only for specific content

Question

I have a input tag and where I am getting input value like this.

input.value += " " + value + ";" ;

In my css I have text-decoration: underline; but here underline is coming in "space" and ";" both the place. Is there any way I can decorate only text part.

My Code is like :

var div = document.getElementById(divID);

var myTable = '<input type="text" id="myInput"  list="myUL" onclick = "openingList()" onkeyup="openingList()" style="width:30%;" >' +
    '<div id="triggers">' + '<img class="trigger" onclick ="deleteValue()" src="css/clearT.png" id="cross" />' + '<img class="trigger" src="css/combo_arrow.png" onclick = "openingList()" id="arrow" />' + '</div>' +
    '<ul id="myUL" hidden=true>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';

div.innerHTML = myTable;

function selectItem(input, value) {
    var newinput = input.value.split(';');
    newinput[newinput.length - 1] = "";
    input.value = newinput.join(";");
    input.value += " " + value + ";" + "";    
}

Current it is coming like this.

What exactly I want here

Answer 1

try this concept: https://jsfiddle.net/uza1pbnw/

Example - 1 with Pure JS

var text = "How are you doing today?";
text = text.split(" ");
    len = text.length,
    result = []; 

for( var i = 0; i < len; i++ ) {
    result[i] = '<span>' + text[i] + '</span>';     
}   

console.log(result.join(' '));

Example - 2 with JQuery

HTML

<p>hello world text done</p>

CSS

<style>
    p span {
        text-decoration: underline;
    }

</style>

JS

<script>
    $('p').each(function() {
        var text = $(this).html().split(' '),
            len = text.length,
            result = [];

        for (var i = 0; i < len; i++) {
            result[i] = '<span>' + text[i] + '</span>';
        }
        $(this).html(result.join(' '));
    });

</script>

https://jsfiddle.net/princesodhi/0h8oqknz/4/

Answer 2

You could write a javascript function that you pass a word to, and it returns that word wrapped in a <span> with text decoration on it.

var myFullString = tdu(input.value) += " " + tdu(value + ";") ;


function tdu(str) { //Text decoration underline function
    return "<span style='text-decoration: underline'>" + str + "<span>"
}