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

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 完全控制样式。