我需要这样做:
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()但不能解决这个问题
答案 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 子串的长度。这基本上会删除当前子字符串末尾的所有内容,然后循环再次尝试。
我试图有效地评论代码。祝你好运。