javascript - 如何格式化包含在html结构中特定符号内的文本并对其进行格式化

Question

我想向网站添加一个外部脚本，这样我就可以格式化某些元素的外观，从而让我的编辑内容变得更轻松。我想知道是否有一种方法可以找到包含在段落中的标签和两个点之间的文本，并通过 css 为其指定特定格式。 Javascript、Jquery 或 Css 都可以，我只是还没有设法找到解决方案。

html结构是这样的:

<p class="title">
::before
#home: research paper
</p>

我想把它变成这样:

<p class="title">
::before
<span>#home:</span> research paper
</p>

请记住，主题标签之后的值不会始终相同(尽管它总是在主题标签之后和两个点之前)。可以搜索特定的词(例如:#home: 或 #house)，因为我已经知道哪些词会出现在网站上并且它们不会改变。

谁能指出我这样做的正确方向？

非常感谢!

Answer 1

尝试

CSS

.title span {
  /* css */
}

js

$(".title:contains('#home:')")
.html(function(_, text) {
  return text.replace(/(#+.*:)/, "<span>$1</span>" )
});

$(".title:contains('#home:')")
.html(function(_, text) {
    return text.replace(/(#+.*:)/, "<span>$1</span>" )
})

.title span {   
    color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="title">
::before
#home: research paper
</p>