根据起始位置和结束位置高亮显示字符串中的子字符串

Highlight a substring within a string based on starting and ending positions

本文关键字：位置 字符串 显示 高亮 结束      更新时间：2023-09-26

给定一个字符串作为输入。假设"风扇叶片的前缘凸出"。点击按钮会将字符串传递给服务器，服务器会返回一个JSON对象

{
  "result": [
    {
      "name": "blade",
      "startPos": 12,
      "endPos": 17
    },
    {
      "name": "bulged",
      "startPos": 44,
      "endPos": 50 
    }
  ]
}

现在，我必须在输入字符串中突出显示"blade"answers"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>

我知道你正在寻找的可能是一种更结构化的方法，但我想最好的方法如下：

var str = "the leading blade edges of the fan blade is bulged";
for(var loc in obj.result){
    str = str.substring(0,obj.result[loc].startPos+loc*17) + "<strong>" +
      str.substring(obj.result[loc].startPos+loc*17,obj.result[loc].endPos+loc*17) + "</strong>" +
      str.substring(obj.result[loc].endPos+loc*17);
}
相关文章：