如何为带有字母#的单词设置样式？答案

【问题标题】：How set style to a word that beings with letter #?如何为带有字母#的单词设置样式？
【发布时间】：2015-11-16 07:43:39
【问题描述】：

我正在我的网站中创建一个标签系统，我想将 CSS 附加到以字母哈希 (#) 开头的单词。谁能告诉我怎么做？

【问题讨论】：

试一试。前段时间为我工作.. stackoverflow.com/questions/14048986/…
你试过CSS属性选择器了吗？ w3schools.com/cssref/sel_attribute_value_contains.asp
在 CSS 中没有办法。 Css 没有选择器来匹配元素的内容。
@rnrneverdies 您可以使用 CSS 来定位包含使用 [attribute~=value] 的特定字符或单词的元素（标题、
等），尽管它会定位整个元素而不仅仅是单个词，
@Lyall 什么？！正如我所说，您无法根据内容匹配元素，您给出的示例匹配属性，而不是元素内容。

标签： javascript css hashtag

【解决方案1】：

您只能将样式附加到 DOMElements。根据您的用例，您将需要使用 javascript、php 或其他语言来查找以 # 开头的单词并将它们包装在具有类的元素中。

`<span class="my_tag">#tag</span>`

然后您可以使用该类向该标签添加样式。

【讨论】：

这个主意不错，谢谢，但这不是答案。假设我有文章，你知道任何人都可以写文章。因此，如果有人将#twitter 放入文章中。我想获取 # 和 twitter 的其余部分。我怎样才能做到这一点？有什么想法吗？

【解决方案2】：

也许你可以使用 twitter-text 库来解析文本并找到标签：

见https://github.com/twitter/twitter-text

【讨论】：

使用源自大数据实践的库通常是一种好习惯（用于开发可靠和有效算法的时间令人难以置信），所以我提高了这个答案。

【解决方案3】：

回答我自己的问题，可以通过以下方式完成：

html:

<p>
  #Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae aliquam, aut quod provident in incidunt quisquam perferendis aperiam ullam #quos ab ad cumque, doloremque repellat reiciendis modi sit consequuntur aliquid!
</p>

JavaScript 和 jQuery：

"use strict";
var allNodes,body,currentElement,currentElementString,split,splitWord,splitWord,splitLetters,stringMatch,newTag,i;

allNodes = document.body.getElementsByTagName("*");

for (i=0;i< allNodes.length;i++) {
  currentElement = allNodes[i];
  currentElementString = currentElement.innerHTML;
  split =  currentElementString.split(' ');
  for (i=0;i< split.length;i++) {
    splitWord = split[i];
    splitLetters = splitWord.split("");
    stringMatch = splitWord.match(/#/g);
    if (stringMatch == "#") {
      newTag = "<a>"+splitWord+"</a>"; 
      currentElementString = currentElementString.replace(splitWord,newTag);
      currentElement.innerHTMl = currentElementString;
      $(currentElement).html(currentElementString); 
    } 
  }
}

还有一些 CSS：

a {
  color: blue;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}

【讨论】：