如何格式化包装在html结构中特定符号内的文本并格式化答案

【问题标题】：How to format text wrapped inside specific symbols within a html structure and format it如何格式化包装在html结构中特定符号内的文本并格式化
【发布时间】：2014-12-29 13:02:33
【问题描述】：

我想向网站添加一个外部脚本，这样我就可以对某些元素的外观进行格式化，从而让我的生活更轻松地编辑内容。我想知道是否有一种方法可以找到包含在主题标签和段落中的两个点之间的文本，并通过 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），因为我已经知道哪些词会出现在网站中并且它们不会改变。

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

非常感谢！

【问题讨论】：

标签： javascript html css dom word

【解决方案1】：

试试

css

.title span {
  /* css */
}

$(".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>

【讨论】：