用jquery在一个句子中的两个单词下划线

Posted 2023-05-08

【中文标题】用jquery在一个句子中的两个单词下划线

【英文标题】：underline two word in a Sentence with jquery

【发布时间】：2021-10-24 09:32:44

【问题描述】：

这是我的代码，但只有一个字带下划线

$(document).ready(function() 
  let firstword = 'web';
  let secondword = 'js';

  $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword + "')").each(function() 
    var regex = new RegExp("(" + secondword + ")", 'g');
    var regex2 = new RegExp("(" + firstword + ")", 'g');
    $(this).html($(this).text().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>'));
    $(this).html($(this).text().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>'));
  );
);

.ConditionsAccept  width: 500px; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="field ConditionsAccept">
  <caption class="caption">Here is some web and js stuff</caption>
</table>

【问题讨论】：

请附上相关的html

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。

我来这里是为了一些好的 C# 标签，而我所能看到的只是修饰过的 javascript。失望是轻描淡写。 专业提示：正确标记您的问题，否则您只会被否决

我为你修好了 sn-p。下次请自行提供minimal reproducible example

开心的时候请访问how to accept an answer

【参考方案1】：

您的第二个 $(this).text() 已从内容中删除了第一个跨度

两次更改 HTML 也不是一个好主意。如果第一个单词是span 或word 或decoration，那么第一个跨度将被第二个更改破坏。

最安全的解决方案是在设置 HTML 之前替换所有文本。

$(document).ready(function() 
  let firstword = 'web';
  let secondword = 'js';

  $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword + "')").each(function() 
    const regex  = new RegExp("(" + secondword + ")", 'g');
    const regex2 = new RegExp("(" + firstword +  ")", 'g');
    let text = $(this).text()
    console.log(text)
    text = text
      .replace(regex,  '<span class="word"  style="text-decoration: underline">$1</span>')
      .replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>');
    $(this).html(text)
      
  );
);

.ConditionsAccept  width: 500px; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="field ConditionsAccept">
  <caption class="caption">Here is some web and js stuff</caption>
</table>

【参考方案2】：

问题在于函数 text() 被用于获取元素的内容。这将获取文本，但 HTML 被剥离。因此，对于第一次使用，它会替换单词 js OK，但第二次使用会删除 span 元素，因此您只剩下第二次使用替换单词（即该正则表达式中的第一个单词）。

这个 sn-p 使用 html() 函数而不是 text() 来确保 span 保持不变。

<div class="field ConditionsAccept">
  <div class="caption">text0 js text web text1 js text3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() 
    let firstword = 'web';
    let secondword = 'js';
    $(".field.ConditionsAccept>.caption:contains('" + secondword + "'):contains('" + firstword + "')").each(function() 
      var regex = new RegExp("(" + secondword + ")", 'g');
      var regex2 = new RegExp("(" + firstword + ")", 'g');
      $(this).html($(this).html().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>'));
      $(this).html($(this).html().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>'));
    );
  );
</script>

【讨论】：

更好的是在分配之前替换两者。就像我一样。如果替换中有“单词”，则在 span 内替换该类

可能会更好（取决于在这种情况下的定义），但我通常尽量不要在不必要的地方更改问题的代码。

在您的情况下，请尝试 let firstword = 'word'; 或 text 或 decoration

【参考方案3】：

我使用您的代码制作了一个示例，并按照您所说的遇到了示例问题。我如何解决它是更改代码如下：

            $(this).html($(this).html().replace(regex, '<span class="word" style="text-decoration: underline">$1</span>'));
            $(this).html($(this).html().replace(regex2, '<span class="word2" style="text-decoration: underline">$1</span>'));

它对我有用。你可以试一试。