如何为以字母#开头的单词设置样式?
How set style to a word that beings with letter #?
我正在我的网站中创建标签系统,我想将 CSS 附加到以字母散列 (#) 开头的单词。谁能告诉我怎么做?
也许您可以使用 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;
}
我正在我的网站中创建标签系统,我想将 CSS 附加到以字母散列 (#) 开头的单词。谁能告诉我怎么做?
也许您可以使用 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;
}