2011-12-27 15 views
2

リンクの単語の最初の数文字に下線を引いています。これはCSSの最初の文字の仕方に似ていますが、文字数は可変です。あるいは、単語の手紙の最初の半分に下線を付けることが有用かもしれません。これをHTML、CSS、またはJavascriptで比較的単純に行う方法はありますか?単語の最初のn文字に下線を付けます

(私は開発者ですず、すべての開発チームに渡すための任意の提案を開いています;)

+3

バニラJSやjQueryの/ MooToolsのような意志のlib仕事をトリング? –

+6

なぜ「開発チーム」はそれに取り組んでいないのですか? –

+0

これは、貴重な開発者の時間を費やす前に評価したい、インタラクションの概念です。 (あなたの時間を意味するものではありません...) – RussBB

答えて

9
<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:言葉。

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:機能として。

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/

+0

おかげでジャレド、それは近いが、実際にはリンクの単語の各単語の最初のn文字に下線を引く方法を望んでいた。 – RussBB

+0

編集を参照してください。スペックを中心に、より完全なソリューションを設計する必要があることに注意してください。概念の証明のために、これはうまくいくはずです。実際に動作するHTMLによっては、必ずしも最も複雑な要求ではありません。 jQueryはそれをより簡単にするでしょう。 –

+0

素晴らしいです。どうもありがとう。だから私は後になったものです。私はjQueryについてお勧めします。 – RussBB

0

私はあなたのリンクの最初のN文字やリンク内の各単語の最初のN文字を置き換えるためにしようとしているかはわかりません。後者の場合には、そのよう

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

などの適切な交換に正規表現

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

を交換してくださいここでは例です:

http://jsfiddle.net/AZpG7/

1

あなたが任意の単語の後&#818;を置くだけでできると下線が引かれ、そのHTMLコードです。

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

それは次のようになります。

を送る

しかし、あなたが見る、あなたのためにそれを行うには、JavaScriptの関数を作成することができます

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

この方法で、あなたが実行している場合:

underlineWord(0,"string"); 

あなたは持っています:

の̲

関連する問題