在jscript和jquery中插入span

时间:2018-04-21 13:48:27

标签: javascript jquery html

我需要这样做:

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()但不能解决这个问题

1 个答案:

答案 0 :(得分:0)

因此,使用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 子串的长度。这基本上会删除当前子字符串末尾的所有内容,然后循环再次尝试。

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