【问题标题】:Question about the extent of functionality for the .replace function关于 .replace 函数的功能范围的问题
【发布时间】:2019-04-06 21:12:13
【问题描述】:

我对 Javascript 比较陌生,一般来说。找了一段时间后,我一直找不到问题的答案,或者我只是在寻找错误的东西。

在一堂课上,我们被要求写一些东西,用户可以在其中输入一个数字并接收返回的数字和所有导致该数字的数字的显示。另一部分是用一个单词替换所有包含 5 或 8 之类的数字的数字实例。

但是 我的问题是我是否可以使用 Replace 功能实现相同的功能。

如下所示,但如果用户显示 50,51,52,它会说 Hello, Hello, Hello 而不是 Hello0, Hello1, Hello2。

$(this).html($(this).html().replace(/5/g, "Hello"));

最初的赋值是使用一些 else if 语句实现的。我也可以通过写出上面的大量变体来模仿上面的预期目标,但这几乎不切实际。

$(this).html($(this).html().replace(/5/g, "Hello"));

【问题讨论】:

  • 我很难理解这些要求。请显示一些示例输入和所需的输出。如果您使用 if/else 块显示您的原始代码,这也可能会有所帮助。

标签: javascript jquery html replace numbers


【解决方案1】:

jQuery 有一个替换元素的 textContent 的速记方法,那就是by using a function。也许您可以改用它。然后只需调整您的正则表达式以在字符串 (the g flag) 中多次包含多个数字 (\d+)。我使用了text() 而不是html(),因为它们有不同的用途,前者更适合您的用例。

$('div').text(function (i, e) {
  return e.replace(/\d+/g, 'Hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>50,51,52</div>

如果您想在示例中的逗号后添加空格,可能会采用不同的方法。在这里,我使用类似的正则表达式将字符串拆分为一个数组,map 将所有匹配的模式与单词“Hello”,然后再次将数组合并为一个字符串。

$('div').text(function (i, e) {
  return e.split(/\d+,/g).map(s => 'Hello').join(', ');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>50,51,52</div>

【讨论】:

    【解决方案2】:

    如果你想用一个东西替换任意长度的数字,你可以使用regular expression,比如/\d+/,这意味着任意数量的数字:

    let s = "50,51,52"
    console.log(s.replace(/\d+/g, "hello"))
    
    // only replace digits -- leaves everything else
    let s2 = "500 some txt, 1 other,52 more"
    console.log(s2.replace(/\d+/g, "hello"))

    【讨论】:

      【解决方案3】:

      我相信一个涉及数字的简单正则表达式就是您所追求的:

      $("#numbers").on("click", function() {
        $(this).html($(this).html().replace(/\d{2}/g, "Hello"));
      });
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <p id="numbers">51, 52, 53</p>
      <p>Click the above paragraph to see magic!</p>
      <sub>One-time magic only</sub>

      【讨论】:

        猜你喜欢
        • 2011-10-30
        • 2015-07-25
        • 1970-01-01
        • 2023-04-09
        • 1970-01-01
        • 1970-01-01
        • 2011-04-24
        • 2020-10-23
        • 2011-08-17
        相关资源
        最近更新 更多