JQuery:如何在span中包装给定的文本部分?

Question

我有一系列标题元素，其中包含文本和文本输入。当我将字符串放入文本输入时，我想突出显示(在<span>中使用类包装)标题元素中的响应字符。

例如，如果文本输入包含单词"world"然后用high light span(高跨度)包裹这个单词，例如

<div class="title">Hello <span class="highlight">World</span>! This is a title</div>

我已经用.replace()实现了这一点，例如:

// value is .val recieved from input
function highlight(value) {
$('.title').each(function() {
var original = $(this).text();
var newText = original.replace(value, "<span class='highlight'>" + value + "</span>");
$(this).html(newText);
});
};

但是，这有几个限制:

1. 它不工作与资本化(如果用户输入world字符串World将不会突出显示)。

2. 它只对单词的第一个实例起作用(如果字符串中有多个单词world的实例，它将只突出显示第一个。

我试图通过插入<span>s来获得每个输入字符串的开始和结束位置，以一种不同的方式来处理这个问题，但这只是造成了混乱:

function highlight(value, el) {
$(el).each(function() {
var original = $(this).text();
var startPosition = original.indexOf(value);

if (startPosition !== 0 || startPosition !== -1) {
var endPosition = (startPosition + value.length);

var newString = original.slice(0, startPosition)
+ '<span class="highlight">'
+ original.slice(startPosition, endPosition)
+ '</span>'
+ original.slice(startPosition);

$(this).html(newString);
}
});
};

有人知道这是可能的吗?有人能给我指个方向吗?

(PS:如果可能的话，我宁愿不使用插件)

Answer 1

您可以使用regexp

只抓取包含该词的标题不会获得太多好处，因为这也会循环

function highlight(value) {
$('.title').each(function() {
let textContent = $(this).text(); 
const wordArr = [...new Set(textContent.match(new RegExp(value, 'ig')))];
if (wordArr.length > 0) { 
wordArr.forEach(word => textContent = textContent.split(word).join(`<span class="highlight">${word}</span>`));
$(this).html(textContent);
}
});
};
highlight("wor");

.highlight  {
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">Hello world</h1>
<h1 class="title">Hello World</h1>
<h1 class="title">Hello World Hello world</h1>

Answer 2

接受的答案，如果字符串包含多个匹配的子字符串，它将不会被突出显示

function highlight(value) {
const pattern = '\b' + value + '\b';
$('.title').each(function () {
var original = $(this).text();
const text = original.match(new RegExp(pattern, 'gi'));
if (text && text.length) { // null if not found
text.forEach(item => {
original = original.replace(item, "<span class='highlight'>" + item + "</span>");
$(this).html(original);
})
}
});
};
highlight("world");

span {
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">World Hello world WorLD</h1>
<h1 class="title">Hello World</h1>