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

change color of text surrounded by quotes or custom

本文关键字：包围 文本 颜色 自定义      更新时间：2023-09-26

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

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

举个例子，它的"为什么选择堆栈溢出？"

我想实现一个javascript钩子，它可以更改"Why choose"的颜色，并将"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工具，我无法对链接标题进行任何其他编辑，所以这是我能想到的最佳解决方案）

类似的东西？

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

（见此小提琴）

相关文章：