Question

我想在链接中强调单词的前几个字符，类似于CSS第一个字母的工作方式，但字母数量可变。或者，强调单词字母的前半部分可能很有用。用HTML，CSS或Javascript相对简单的方法吗？

（我不是开发人员，我愿意接受所有建议并传递给开发团队;）

Answer 1

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

编辑：作为一种功能。

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/

Answer 2

您可以简单地将̲放在任何单词后面，并加下划线，即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");

你将拥有：

的字符串

Answer 3

我不确定您是否尝试替换链接中的前N个字母或链接中每个单词的前N个字母。如果是后者，请尝试替换正则表达式

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

使用适当的替代品，例如

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

以下是一个例子：

http://jsfiddle.net/AZpG7/

在前n个字符下划线

3 个答案: