Question

我需要这样做：

text: pen
textarea:pencil penpen
div: <span>pen</span>cil <span>pen</span><span>pen</span>

我有这个：

text 1: <input type="text" id="txt1" /><br /><br />
<textarea cols="50" rows="20" id="txt2"></textarea><br />
<button id="btn">click</button><br />
<div id="rslt"></div>
<script>
if ($("#txt2").val().includes($("#txt1").val())) {
    $("#rslt").text($("#txt2").val());
</script>

我知道我需要使用indexOf（）但不能解决这个问题

Answer 1

因此，使用replace（）实际上会做你想要的，而不是拆分和重新加入字符串。但棘手的一点是意识到你需要为此创建一个正则表达式。您希望多次匹配，并且您希望不区分大小写匹配。

所以我取第一个输入的值，然后用这个值创建一个自定义正则表达式。我在第一个中搜索实际的字符串，如果找到它，我继续并替换输出中的所有实例。

我更新了CSS，向您展示“pen”（或“Pen”或“PEN”）的每个实例都包含在自己的标记中，将鼠标悬停在其中任何一个上。

希望它有所帮助！

$("#btn").on("click", function() {
  // First, pull the strings out. Make life easier.
  let val1 = $("#txt1").val(),
  // I want it to be a case insensitive match, and to match multiple.
  //  So... REGEX!
    val1Regex = new RegExp(val1, "gi");
    val2 = $("#txt2").val();
  // indexOf() in action.
//  console.log(val2.indexOf(val1));

  // and if the search string:
  if (val2.includes(val1)) {
    // I want to highlight the found string, maybe?
    $("#rslt").html(val2.replace(val1Regex, "<b>$&</b>"))
  };
});

b:hover {
  background-color: #C33;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
text 1: <input type="text" id="txt1" value="pen" /><br /><br />
<textarea cols="50" rows="20" id="txt2">Pencil pentacle penpen</textarea><br
/>
<button id="btn">click</button><br />
<div id="rslt"></div>

所以这是家庭作业。好吧，这不会给你所有东西，它不是案例匹配，但它让你更接近你想要的东西：

$("#btn").on("click", function() {
  // First, pull the strings out. Make life easier.
  let val1 = $("#txt1").val(),
      val2 = $("#txt2").val();
  // indexOf() in action.
//  console.log(val2.indexOf(val1));

  // and if the search string:
  if(val2.includes(val1)){
    // This is going to be the output HTML. I will have to
    //  build it, piece by piece.
    let myNewContent = "";
    
    // Loop through until the substring is no longer in the
    //   superstring.
    while (val2.includes(val1) ){
      // Our new string contains everything UP TO the found
      //  substring, plus our wrapped substring
      myNewContent += val2.slice(0, val2.indexOf(val1))+"<b>"+val1+"</b>";
      // the value of val2 changes. It should now contain
      //  everything AFTER the found instance of the
      //  substring, which may still contain MORE instances
      //  of that substring. Hence the loop.
      val2 = val2.slice(val2.indexOf(val1)+val1.length);
    }
    // Don't forget -- after the loop, we still need to add
    //  whatever remains in our 'superstring' back in!
    myNewContent += val2;
    
    // And display the edited string.
    $("#rslt").html(myNewContent);
  }

  
});

b:hover {
  background-color: #C33;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

text 1: <input type="text" id="txt1" value="pen" /><br /><br />
<textarea cols="50" rows="20" id="txt2">Pencil pentacle penpen</textarea><br
/>
<button id="btn">click</button><br />
<div id="rslt"></div>

这是做同样的事情，只有老派。会发生什么，如果有任何匹配的字符串，我们有一个while循环。只要我们有另一个子串匹配，那个循环就会继续。

在while循环中，我首先将大字符串中的所有UP到indexOf位置附加到新创建的字符串中，将包装的子字符串添加到它的末尾。这个新字符串将是我们的输出值。我用一个缩短的自身版本替换大字符串，因为我删除了从这一个的FRONT到子串的索引 PLUS 子串的长度。这基本上会删除当前子字符串末尾的所有内容，然后循环再次尝试。

我试图有效地评论代码。祝你好运。

在jscript和jquery中插入span

1 个答案: