给定一个字符串作为输入。假设“风扇叶片的前叶片边缘凸起”。 单击按钮会将字符串传递给服务器,服务器返回一个 JSON 对象
{
"result": [
{
"name": "blade",
"startPos": 12,
"endPos": 17
},
{
"name": "bulged",
"startPos": 44,
"endPos": 50
}
]
}
现在我必须在输入字符串中突出显示“blade”和“bulged”这两个词并将它们显示为输出。
输入:“风扇叶片的前叶片边缘凸起”
预期输出:风扇叶片的前叶片边缘凸起
我总是可以匹配单词并使用 Regex 突出显示它们,但它会突出显示输入字符串中“blade”的两次出现。
在 JavaScript 中有什么方法可以根据位置识别字符串并突出显示它们。
非常感谢您的帮助。
这是我的 Fiddle
最佳答案
使用JS字符串方式 substring
找到字符串的相关部分。在这种情况下,由于您必须为突出显示添加标记,因此您希望找到目标词前后的子字符串。
然后使用 <strong>
添加适当的高亮显示或类似的东西。请参见下面的示例。
你需要遍历 obj.result
,同时考虑到添加像 <strong>
这样的标记这一事实更改后面单词的起始索引。您可能会考虑从字符串末尾附近的单词开始突出显示,以避免索引的复杂性。为此,请按 startPos
降序排列列表。 ,如下图。
var str = "the leading blade edges of the fan blade is bulged";
var obj = {
"result": [{
"name": "blade",
"startPos": 12,
"endPos": 17
}, {
"name": "bulged",
"startPos": 44,
"endPos": 50
}]
};
obj.result.sort(function(a, b) {
return b.startPos - a.startPos;
})
for (var i = 0; i < obj.result.length; i++) {
var start = obj.result[i].startPos,
end = obj.result[i].endPos,
before = str.substring(0, start),
after = str.substring(end),
middle = "<strong>" + obj.result[i].name + "</strong>";
str = before + middle + after;
}
document.getElementById("result").innerHTML = str;
<div id="result"></div>
关于javascript - 根据开始和结束位置突出显示字符串中的子字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26839175/