javascript - 更改被引号或自定义包围的文本的颜色

Question

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

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

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

我想实现一个 javascript 钩子(Hook)，它可以改变“为什么选择”的颜色并留下“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)