Question

我有一个奇怪的情况，我需要搜索导航链接标题并根据标记更改特定颜色。

由于我无法控制的原因，在我使用的CMS工具中，我有一个输入字段用于导航项目的标题。

让我们说，对于这个例子，它的“为什么选择Stack Overflow？”

我想实现一个javascript钩子，可以改变“为什么选择”的颜色并留下“Stack Overflow？”它的正常CSS风格。

我正在考虑介绍类似于论坛代码的内容，例如"*Why choose* Stack Overflow?"

现在，我可以使用javascript搜索*并替换为<div class='uniquecss'>

我看到了jquery的[name $]，但是我太不熟悉它了解如何让它工作。

以下是一些帮助此示例的HTML：

  <nav>
    <ul>
      <li><a href="#"><div class='stext'>IT'S YOUR RIGHT TO</div>BREATHE RIGHT</a>
        <ul>
          <li><a href="#"><div class='stext'>IT'S YOUR RIGHT TO</div>BREATHE RIGHT</a></li>
          <li><a href="#"><div class='stext'>THE BENEFITS OF</div>BREATHING RIGHT</a></li>
          <li><a href="#"><div class='stext'>HOW BREATHE RIGHT</div>WORKS</a></li>
          <li><a href="#"><div class='stext'>BREATHE RIGHT</div>PRODUCTS</a></li>
        </ul>
      </li>

      <li><a href="#"><div class='stext'>THE BENEFITS OF</div>BREATHING RIGHT</a></li>
      <li><a href="#"><div class='stext'>HOW BREATHE RIGHT</div>WORKS</a>
        <ul>
          <li><a href="#"><div class='stext'>IT'S YOUR RIGHT TO</div>BREATHE RIGHT</a></li>
          <li><a href="#"><div class='stext'>THE BENEFITS OF</div>BREATHING RIGHT</a></li>
          <li><a href="#"><div class='stext'>HOW BREATHE RIGHT</div>WORKS</a></li>
          <li><a href="#"><div class='stext'>BREATHE RIGHT</div>PRODUCTS</a></li>
        </ul>
      </li>
      <li><a href="#"><div class='stext'>BREATHE RIGHT</div>PRODUCTS</a></li>
    </ul>
  </nav>

这基本上是我想要的样子。我希望它能够相当强大，因为它会扫描第一个*添加<div class='stext'>然后在下一个*添加</div>

我可以让它工作，假设我知道用于此任务的正确的jquery / javascript是什么。

任何其他建议也会很棒！谢谢

（同样，由于我们使用的CMS工具，我无法对链接标题进行任何其他编辑，因此这是我能提出的最佳解决方案）

Answer 1

这样的东西？

$("a").each(function() {
  this.innerHTML = this.innerHTML.replace(
               /\*([^\*]+)\*/g, 
               '<div class="stext">$1</div>');
});

（见this fiddle）

更改由引号或自定义包围的文本的颜色

1 个答案: