Javascript - 如何替换一个简单的字符串

Question

我已经尝试了所有变体来替换字符串，“子事件”用“选定”。我还没有接触过“子事件”，但影响了它周围的一切。

这隐藏了它之后的一切：

<script type="text/javascript">
$(function(){
$("div[class$=registrationDetails] > ul > li").text(function(){
     var str = $(this).text("and the sub events").str.replace("sub events", "selected");
});
});
</script>

我尝试了 W3 School 方法，我也在另一个 StackOverflow 帖子中找到了该方法，但它什么也没做。这是我用这种方法尝试过的最基本的形式。

<script type="text/javascript">
var str1 = "and the sub events";
var str2 = str1.replace("sub events", "selected");
</script>

它看起来如此接近，但不会像它应该的那样替换。谢谢。

Answer 1

首先修改您在回调中返回值的方式，然后修改replace。这一切都假设<li /> 具有您要替换的文本。

$(function(){
  $("div[class$=registrationDetails] > ul > li").text(function() {
    return this.innerText.replace("sub events", "selected");
  });
});

Answer 2

这件事对我有用。

var str1 = "和子事件";

str1 = str1.replace("子事件", "选中")

console.log(str1)

输出 -

[正在运行] 节点“..\test.js” 和被选中的

Answer 3

这是一种使用 each 循环执行所需操作的方法。使用 if 语句查看是否存在匹配项

$(function() {
  // select the class with a dot, not attribute selector
  $("div.registrationDetails > ul > li").each(
    function() {
      /// read text
      var text = $(this).text()
      // check if text is there
      if (text.includes('sub events')) {
        // if it is replace
        var str = text.replace('sub events', 'selected')
        //update the element
        $(this).text(str) 
      // another change
      } else if (text.includes('selected')) { 
        var str = text.replace('selected', 'sub events')
        $(this).text(str) 
      }
    }
  );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="registrationDetails">
  <ul>
    <li>foo bar sub events</li>
    <li>other selected</li>
  </ul>
</div>

还有其他方法可以做到这一点，但这是您尝试做的基本步骤。

一种更复杂的方法是使用文本和带有替换的正则表达式。

// called by the replace method
// returns the opposite of what was matched
function replacerFnc (match) {
  return match==="sub events" ? "selected" : "sub events"
}

// What is called by jQuery's text method
function replacement(index, text) {
  // regular expression with groups to match either one of the strings
  var re = /(sub events|selected)/
  // use the reg exp and replace the string
  return text.replace(re, replacerFnc)
}

// basic jQuery code to select the lis and set the text
$(function() {
  $("div.registrationDetails > ul > li").text(replacement);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<div class="registrationDetails">
  <ul>
    <li>foo bar sub events</li>
    <li>other selected</li>
  </ul>
</div>

Answer 4

我找到了替换文本并维护 html 列表格式的脚本。

<script type="text/javascript">
$('div.registrationDetails > ul > li').html(function(i, htm){
    return htm.replace(/sub events/, 'selected');
});
</script>