1

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

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

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

我想实现一个javascript钩子，可以改变“为什么选择”的颜色并离开“堆栈溢出？” 到其正常的 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 工具，我无法对链接标题进行任何其他编辑，所以这是我能想到的最佳解决方案）

4

1 回答 1

2

像这样的东西？

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

（见这个小提琴）

于 2013-08-05T17:38:40.267 回答