如何为以字母#开头的单词设置样式?

How set style to a word that beings with letter #?

我正在我的网站中创建标签系统,我想将 CSS 附加到以字母散列 (#) 开头的单词。谁能告诉我怎么做?

也许您可以使用 twitter-text 库来解析文本并查找主题标签:

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

您只能将样式附加到 DOMElement。根据您的用例,您将需要使用 javascript、php 或其他语言来查找以 # 开头的单词并将它们包装在带有 class.[=11= 的元素中]

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

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

回答我自己的问题,这可以通过以下方式完成:

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;
}