加下劃線的前n個字符

我想在鏈接中加下劃線的前幾個字母，類似於CSS首字母的工作方式，但字母數量可變。或者，強調單詞的前半部分可能很有用。任何方式相對簡單地用HTML，CSS或Javascript來做到這一點？加下劃線的前n個字符

（我不是開發人員，我向所有人開放的任何建議傳授給開發團隊;）

2011-12-27 RussBB

香草JS還是會像jQuery/Mootools的一個lib的工作？ – 2011-12-27 20:20:49

爲什麼「開發團隊」不在這方面工作？ – 2011-12-27 20:40:18

這是一個我在評估寶貴的開發人員時間之前要評估的交互概念。（並不意味着你的時間不值錢...） – RussBB 2011-12-27 20:46:33

<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/

編輯：詞。

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/

來源

2011-12-27 20:39:57

謝謝賈裏德，這很接近，但實際上我希望有一種方式來強調鏈接中單詞的前n個字母。 – RussBB 2011-12-27 20:47:58

請參閱編輯。注意一個更完整的解決方案必須圍繞規格進行設計;爲了證明概念，這應該起作用。它不一定是最複雜的請求，取決於它必須使用的實際HTML。 jQuery也會讓它更直接。 – 2011-12-27 20:52:33

太棒了。非常感謝。所以這是可行的，這是我所追求的。我會根據你的建議詢問jQuery。 – RussBB 2011-12-27 20:59:56

我不知道，如果你想更換第一N個字母中的鏈接或鏈接的每個單詞的第N個字母。如果是後者，嘗試用適當的替代，如

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

這裏更換正則表達式

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

是一個例子：

http://jsfiddle.net/AZpG7/

來源

2011-12-27 20:45:56 Jimmy

您可以簡單地把̲任何單詞後它變成了下劃線，它是一個HTML代碼。

<input type=button value=S̲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");

您將有：

小號̲特林

來源

2014-01-23 11:01:42

加下劃線的前n個字符

回答

相關問題