Question

我知道<span>可以用来标记我想要样式的文字，但是如果我想做一些像这样的事情：让所有单词“变成”红色或者使一些文本变成蓝色而其他文本变成绿色？有一个简单的方法吗？

h1,
p {
  color: red;
}
span {
  font-weight: bold;
  color: green;
}

<ul>
  <h3>This is Title 1</h3>
  <p>Enterprise networks are <span>becoming more complex every day</span>. As you spend more time and resources keeping the network up and running, it gets tough to develop and prepare for new markets or products. It’s time to make the switch to managed network
    services.</p>
  <p>Access this white paper to discover the <span>key benefits</span> of managed network services and learn how to stay in control of your network at the same time.</p>
</ul>

Answer 1

使用类来设置此样式。例如：

<强> HTML：

<ul>
<h3>This is Title 1</h3>
    <p>Enterprise networks are <span class="green">becoming more complex every day</span>. As you spend more time and resources keeping the network up and running, it gets tough to develop and prepare for <span class="blue"> new markets or products</span>. It’s time to make the switch to managed network services.</p>
<p>Access this white paper to discover the <span class="red">key benefits</span> of managed network services and learn how to stay in control of your network at the same time.</p>
</ul>

<强> CSS：

.green {
    color:green;
    font-weight:bold;
}
.red {
    color:red;
    font-weight:bold;
}
.blue {
    color:blue;
    font-weight:bold;
}

<强> Demo

您可以使用jQuery标记所有“The”字样。

$.fn.wrapInTag = function(opts) {

  var tag = opts.tag || 'strong',
      words = opts.words || [],
      regex = RegExp(words.join('|'), 'gi'),
      replacement = '<'+ tag +'>$&</'+ tag +'>';

  return this.html(function() {
    return $(this).text().replace(regex, replacement);
  });
};

$('ul').wrapInTag({
  tag: 'span class="green" ',
  words: ['the']
});

Live demo

Answer 2

如果您可以使用一点Javascript / jQuery，那么就可以这样做了

我已使用Javascript的 RegExp 在全球范围内搜索单词and。

＆＃13;

$(document).ready(function(){
  var hold = $('p').html();
  var match = hold.replace(/and/g, "<span>and</span>");
  $('p').html(match);
});

＆＃13;

span {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is Title 1
Enterprise networks are becoming more complex every day. As you spend more time and resources keeping the network up and running, it gets tough to develop and prepare for new markets or products. It’s time to make the switch to managed network
services.
Access this white paper to discover the key benefits of managed network services and learn how to stay in control of your network at the same time.</p>

＆＃13;

Answer 3

如果你需要精确标记每一个＆＃34;＆＃34; - 它应该通过javascript完成（我几乎无法建议其他方式。逻辑如下：你知道，例如，你需要扫描所有＆＃34;

＆＃34;标签为＆＃34;＆＃34;使用javascript的单词。 2.用你已经拥有CSS的类（你在哪里写下你需要的颜色）用特殊的span包装它。（p>

如果您的站点中有编辑器，允许您设置特殊标记（如跨度）并设置它们，那么您需要在所需文本上设置具有特定类的跨度，文本将是颜色（或者你需要的任何偏好。

例如：

<p>Enterprise networks are <span class='ColoredRedText'>becoming more complex every day</span>. As you spend more time and resources keeping the network up and running, it gets tough to develop and prepare for new markets or products. It’s time to make the switch to managed network services.</p>
<p>Access this white paper to discover the <span class='ColoredRedText'>key benefits</span> of managed network services and learn how to stay in control of your network at the same time.</p>

然后你写CSS：

span.ColoredRedText{
color: #b80000;
font-weight: bold;
}

你得到了你需要的东西。

至于＆＃34;＆＃34;一句话，我最好使用JQUERY，并且会这样做：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.min.js'></script>
<script type='text/javascript'>
$('p').each(function(){
$(this).html.replace("the", "<span class='theThe'>the</span>")
});
</script>

这是一个live demo： https://jsfiddle.net/qnva4umd/

希望我在这里写的很多单词都很清楚并回答你的问题。

编辑多个文本的样式

3 个答案: