用錨標記替換字符串的一部分

Question

我有一句話：“這是一個帶有link1的句子，它也具有link2”。它在p標記中。 在開始和結束時，我分別也有數據：

[{ start: 26, end: 31 }, { start: 45, end: 50 }]

是否可以使用具有較高可用數據的定位標記替換句子的這些部分。 結果就是這樣的：

<p>This is a sentence with a <a>link1</a>, also it has <a>link2</a></p>

謝謝！

Answer 1

構建HTML字符串和/或dangerouslySetInnerHTML使用dangerouslySetInnerHTML並不是這里的正確解決方案。 為了解決此問題，請考慮以下結構：

<p>This is a sentence with a <a>link1</a>, also it has <a>link2</a></p>

...可能是用這個React組件生成的（為了清楚起見，它比必需的更為冗長）：

const LinkText = () => {
  const parts = [
    'This is a sentence with a ',
    <a>{'link1'}</a>,
    ', also it has ',
    <a>{'link2'}</a>,
  ];
  return <p>{parts}</p>;
};

考慮到這一點，問題是這樣的：我們如何從字符串和鏈接位置數組生成parts數組？ 解決的辦法是迭代連桿位置的陣列上，並且在每次迭代中，推到陣列1）的“非鏈接”以前的鏈接位置的之間文本end的字符串的開頭（或），和2） <a>包含當前鏈接位置的start和end 。 一個簡單有效的實現如下所示：

 const LinkText = ({ text, linkPositions }) => { const parts = []; let currentIndex = 0; linkPositions.forEach(({ start, end }) => { if (currentIndex < start) { parts.push(text.slice(currentIndex, start)); } parts.push(<a>{text.slice(start, end)}</a>); currentIndex = end; }); if (currentIndex < text.length - 1) { parts.push(text.slice(currentIndex)); // Remaining text after the last link } return <p>{parts}</p>; }; const text = 'This is a sentence with a link1, also it has link2'; const links = [{ start: 26, end: 31 }, { start: 45, end: 50 }]; ReactDOM.render(<LinkText text={text} linkPositions={links}/>, document.querySelector('div')); 

 a{color:blue} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div></div> 

Answer 2

最好的方法是使用ID和JS。

因此，例如，您的HTML如下所示：

<p>This is a sentence with a <a id="linkOne">link1</a>, also it has <a id="linkTwo">link2</a></p>

然后您的JS會這樣稱呼：

document.getElementById("linkOne").href = "http://linkOne.com"
document.getElementById("linkTwo").href = "http://linkTwo.com"

Answer 3

您可以使用帶有正則表達式的str.replace來實現。

正如@Dupocas所說，React將轉義html標簽，因此您將需要危險地使用SetInnerHTML

 const str = 'This is a sentence with a link1, also it has link2'; const result = str.replace(/link(\\d)/g, (match, linkId) => { return `<a href="${linkId}">${match}</a>`; }); console.log(result); 

Answer 4

您可以使用此代碼段將特定位置的文本替換為鏈接。 由於從字符串末尾更改它比較容易，因此我已根據開始對其進行了降序排序。

 document.getElementById("convert").addEventListener("click", convertLinks); addEventListener function convertLinks() { var pTag = document.getElementById("test") var text = pTag.innerHTML posData = [{ start: 26, end: 31 }, { start: 45, end: 50 }] posData = posData.sort(function(pos1, pos2) { return pos2.start - pos1.start }) for (pos of posData) { text = replaceLink(text, pos) } pTag.innerHTML = text; } function replaceLink(text, pos) { return text.slice(0, pos.start) + "<a>" + text.slice(pos.start, pos.end) + "</a>" + text.slice(pos.end) } 

 a { color: blue } 

 <p id="test">This is a sentence with a link1, also it has link2</p> <button id="convert"> Convert Links </button>