Question

如何使用JavaScript或CSS更改页面上的字符串。

我将有大约50个元素，其中包含用逗号分隔的标记，即

 <a name="tagslist">Skrillex, dubstep, dance</a>

我想使用JavaScript来获取每个单词并对它们进行不同的样式设置，使它们看起来不像是用逗号分隔，而是用不同的行分隔。问题是页面上可能有不同数量的标签列表。

有什么办法可以轻松实现这个目标吗？

Answer 1

首先，退出上一个里程碑并使用此HTML：

<div id="tagslist">Skrillex, dubstep, dance</div>

然后你可以这样做：

var elm = document.getElementById('tagslist');
elm.innerHTML = elm.innerHTML.replace(/, /g,'<br />');

你当然可以做一些更复杂的事情，比如：

elm.innerHTML = "<div class='tag'>"+elm.innerHTML.replace(/, /g,"</div><div class='tag'>")+"</div>";

或者，您可以使用真正的DOM方法：

var elm = document.getElementById('tagslist'), tags = elm.firstChild.nodeValue.split(", "),
    l = tags.length, i, div;
elm.removeChild(elm.firstChild);
for( i=0; i<l; i++) {
    div = elm.appendChild(document.createElement('div'));
    div.appendChild(document.createTextNode(tags[i]));
    // apply styles, className, etc. to div
}

Answer 2

$('a[name="tagslist"]').html(function(_, html){
    var arr = [],
        tags = html.split(/\s*,\s*/);

    for (var i=0; i<tags.length; i++)
        arr.push('<div class="whatever">' + tags[i] + '</div>');

    return arr.join('');
});

Answer 3

考虑使用现有的库，例如http://ivaynberg.github.com/select2/#tags

Answer 4

您必须为每个锚标签设置单独的锚标记，以便对它们进行不同的样式设置。对于它们之间的换行符，您可以在它们之间放置br标记。

Answer 5

你想做什么是不可能的。一个更理想的解决方案是让html像这样呈现：

<span class="tagslist">
    <a href="#">Skrillex</a>
    <a href="#">dubstep</a>
    <a href="#">dance</a>
</span>

这样，您可以使用CSS完全控制样式。

如何使用JavaScript或CSS更改页面上的字符串

5 个答案: