加下划线的前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个字符

回答

相关问题