在JavaScript中突出顯示子字串中的子字串

我試圖使用開始和結束索引突出顯示字串中的子字串。但是我在突出顯示重疊的子字串時遇到了問題。例如

我有一個text和一個array突出顯示。

有什么辦法，我怎樣才能避免重疊的標簽。我嘗試regex匹配子字串，但無法解決。

沙盒鏈接

let tagObject = {
  "text": "I am asking a question in stackoverflow",
  "tags": [{
      start: 0,
      end: 1,
      value: "I",
      tag: "TAG1"
    },
    {
      start: 0,
      end: 4,
      value: "I am",
      tag: "TAG2"
    },
    {
      start: 5,
      end: 22,
      value: "asking a question",
      tag: "TAG3"
    },
    {
      start: 14,
      end: 22,
      value: "question",
      tag: "TAG4"
    },
    {
      start: 14,
      end: 25,
      value: "question in",
      tag: "TAG5"
    }
  ]
}

const color = {
  outer: "color: #1d39c4; background: #f0f5ff; border-color: #adc6ff;",
  inner: "background: #adc6ff;",
  bg: "#f0f5ff"
}

const createStyledString = (obj) => {
  let {
    text,
    tags
  } = obj;
  tags.sort((a, b) => b.start - a.start);
  tags.forEach(t => {
    const {
      start,
      end,
      value,
      tag
    } = t;
    text = text.substring(0, start)  
      `<span contenteditable="false" data-action="${value}---${start}---${end}---${color.bg}---${tag}" unselectable="on" onselectstart="return false;" name="tag"  style="${color.outer}">${value}<span  unselectable="on" onselectstart="return false;" data-action="${value}---${start}---${end}---${color.bg}---${tag}" style="${color.inner}">${tag}</span></span>`  
      text.substring(end)
  });
  return text;
}
document.body.innerHTML=createStyledString(tagObject)

uj5u.com熱心網友回復：

你的方法有兩個主要問題。

1. 首先，如果您有嵌套值，您將多次附加它們。
2. 其次，您將開始和結束位置視為在修改字串后它們沒有改變。

因此，可能的解決方案如下：

1. 不要嵌套值，只需再次使用相同的子字串。
2. 跟蹤實際位置以及初始“虛擬”位置，并使用它將代碼插入正確的位置。

這是一個作業片段。

let tagObject = {
  "text": "I am asking a question in stackoverflow",
  "tags": [{
      start: 0,
      end: 1,
      value: "I",
      tag: "TAG1"
    },
    {
      start: 0,
      end: 4,
      value: "I am",
      tag: "TAG2"
    },
    {
      start: 5,
      end: 22,
      value: "asking a question",
      tag: "TAG3"
    },
    {
      start: 14,
      end: 22,
      value: "question",
      tag: "TAG4"
    },
    {
      start: 14,
      end: 25,
      value: "question in",
      tag: "TAG5"
    }
  ]
}

const color = {
  outer: "color: #1d39c4; background: #f0f5ff; border-color: #adc6ff;",
  inner: "background: #adc6ff;",
  bg: "#f0f5ff"
}

const createStyledString = (obj) => {
  let {
    text,
    tags
  } = obj;
  tags.sort((a, b) => b.start - a.start);
  
  // TO KEEP TRACK OF INSERTED TEXT
  let insertedAmmount = []
  
  tags.forEach(t => {
    const {
      start,
      end,
      value,
      tag
    } = t;
    
    // COMPUTE THE REAL START AND END POSITIONS
    // TAKING INSERTED TEXT INTO ACCOUNT
    let realStart = start
    let realEnd = end
    for(let idx in insertedAmmount){
      if(idx < start){
        realStart  = insertedAmmount[idx]
      }
      if(idx <= end){
        realEnd  = insertedAmmount[idx]
      }
    }
    
    let pre = `<span contenteditable="false" data-action="${value}---${start}---${end}---${color.bg}---${tag}" unselectable="on" onselectstart="return false;" name="tag"  style="${color.outer}">`
    
    let pos = `<span  unselectable="on" onselectstart="return false;" data-action="${value}---${start}---${end}---${color.bg}---${tag}" style="${color.inner}">${tag}</span></span>`
    
    // UPDATE THE INFORMATION ABOUT INSERTED TEXT
    insertedAmmount[start] = (insertedAmmount[start] || 0)   pre.length
    insertedAmmount[end] = (insertedAmmount[end] || 0)   pos.length
    
    // DON'T INSERT DIRECTLY THE VALUE BUT THE ALREADY EXISTENT TEXT
    text = text.substring(0, realStart) 
        pre
        text.substring(realStart, realEnd)
        pos
        text.substring(realEnd)
  });
  return text;
}
document.body.innerHTML=createStyledString(tagObject)

標籤：javascript 细绳 子串 强调

上一篇：什么需要return以及為什么我們需要將變數作為函式訪問以獲取其值-在Nodejs中？

下一篇：如何在react-bootstrap的textarea中獲取字串并在單擊按鈕時發送到函式？