CODEWITHSUNDEEP
javascripthtmlcss
RussBB
RussBB

Reputation: 47

Underline first n characters of words

I'd like to underline the first few characters of words in a link, similar to how CSS first-letter works but with a variable number of letters. Alternatively, underlining the first half of a word's letters could be useful. Any way to do this relatively simply with HTML, CSS or Javascript?

(I'm no developer, and am open to all and any suggestions to pass on to the development team ;)

Upvotes: 3

Views: 4642

Answers (3)

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3285

You can simply put ̲ after any word and it becomes underlined, its a HTML Code.

<input type=button value=S&#818;end>

It becomes:

S̲end

But you can create a JavaScript function to do it for you, see:

function underlineWord(pos,str){
  str = str.substring(0,pos) + str[pos] + "&#818;" + str.substring(pos+1,str.length);
  return str;
}

This way, if you execute:

underlineWord(0,"string");

You will have:

s̲tring

Upvotes: 2

Jared Farrish
Jared Farrish

Reputation: 49208

<a href="#" class="underline">This is text.</a><br/>
<a href="#" class="underline">More text.</a><br/>
<a href="#" class="">No underline.</a><br/>
<a href="#" class="underline">Underline me.</a><br/>
<a href="#" class="">Nada here though.</a><br/>

a,
a.underline {
    text-decoration: none;
}
.underline span {
    color: green;
    text-decoration: underline;
}

var links = document.links;
var chars = 3;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        var text = links[i].innerHTML;
        text = '<span>' +
            text.substring(0, chars) +
            '</span>' +
            text.substring(chars);
        links[i].innerHTML = text;
    }
}

http://jsfiddle.net/hMEHB/

EDIT: Words.

var links = document.links;
var chars = 3;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        var text = links[i].innerHTML.split(' ');
        for (var p = 0, words = text.length; p < words; p++) {   
            text[p] = '<span>' +
                text[p].substring(0, chars) +
                '</span>' +
                text[p].substring(chars);
        }
        links[i].innerHTML = text.join(' ');
    }
}

http://jsfiddle.net/hMEHB/1/

EDIT: As a function.

var links = document.links;
var chars = 2;

for (var i = 0, total = links.length; i < total; i++) {
    if (links[i].className.indexOf('underline') > -1) {
        setUnderline(links[i], chars);
    }
}

function setUnderline(link, chars) {
    var text = link.innerHTML.split(' ');
    for (var p = 0, words = text.length; p < words; p++) {   
        text[p] = '<span>' +
            text[p].substring(0, chars) +
            '</span>' +
            text[p].substring(chars);
    }
    link.innerHTML = text.join(' ');
}

http://jsfiddle.net/hMEHB/2/

Upvotes: 9

Jimmy
Jimmy

Reputation: 91472

I'm not sure if you're trying to replace the first N letters in a link or the first N letters of each word in a link. If the latter, try replacing the regex

new RegExp("\b\w{1," + N + "}", "g")

with an appropriate replacement such as

function(a) { return "<u>" + a + "</u>"; }

Here's an example:

http://jsfiddle.net/AZpG7/

Upvotes: 0

Related Questions