如何使用JavaScript將HTML段落分割為其文本行

Question

是否有可能（以及如何）使用JavaScript將一段文本拆分為各自的行。 我想做的是在段落或塊引用的每一行上實現懸掛標點符號，而不僅僅是起始行。

任何其他想法也會受到歡迎！

澄清我被要求對“將一個段落分成各自的行”的含義不那么含糊。

在HTML中， <p>元素創建一個文本塊。 同樣，許多其他元素也是如此。 這些文本主體被包裝以適應寬度（無論該寬度是由css設置還是由默認設置假定）我似乎無法使用正則表達式或任何其他方法檢測換行發生的位置。 所以讓我們說段落的長度為7行，我希望能夠檢測到它是7行，以及這些行的開始和結束位置。

尋找\\n或\\r \\n似乎不會產生任何結果。

Answer 1

一種蠻力的方法是拆分你段落中的所有單詞並制作它們的span 。 然后，您可以測量跨度的offsetTop屬性，以查找哪些最終位於不同的行中。

在下面的代碼片段中， getLines()返回一個數組數組，其中每個內部數組都包含一行中每個單詞的span元素。 然后你可以操縱它，因為你希望使用一些CSS來創建懸掛標點符號，也可以通過插入帶有標點符號的絕對定位跨度。

 //So it runs after the animation setTimeout(function(){ splitLines(); showLines(); }, 1000) function showLines() { var lines = getLines(); console.log( lines.map(function(line) { return line.map(function(span) { return span.innerText; }).join(' ') })); } function splitLines() { var p = document.getElementsByTagName('p')[0]; p.innerHTML = p.innerText.split(/\\s/).map(function(word) { return '<span>' + word + '</span>' }).join(' '); } function getLines() { var lines = []; var line; var p = document.getElementsByTagName('p')[0]; var words = p.getElementsByTagName('span'); var lastTop; for (var i = 0; i < words.length; i++) { var word = words[i]; if (word.offsetTop != lastTop) { lastTop = word.offsetTop; line = []; lines.push(line); } line.push(word); } return lines; } 

 <p>Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for Here is a paragraph that we want to track lines for Here is a paragraph that we want to track lines for Here is a paragraph that we want to track lines for</p> 

這是一個小提琴，你可以調整窗口大小，以便段落改變大小http://jsfiddle.net/4zs71pcd/1/

Answer 2

看起來像hang hanging-punctuation css屬性只能確保元素的第一個格式化行的開頭的任何標點符號都會掛起。 因此，您可能希望動態地將文本拆分為正確長度的行，將它們放入新的<p>元素（或塊引用）中並對這些新元素應用hanging-punctuation: 'first' 。 截至目前，沒有主流瀏覽器支持hanging-punctuation屬性（ 引用 ）。

通常我會建議檢查換行符（ \\n ）在文本中的位置，但通常沒有人明確地將它放在他們寫的文本中。 相反，他們讓瀏覽器決定在哪里添加新行，具體取決於窗口大小（類似於自動換行）。當你開始考慮給定的<p>元素中可能有多行時，這會變得更加棘手，並且取決於在瀏覽器窗口的大小，該行可以在任何地方拆分。 你必須抓住文本，找到它的容器的寬度，並以某種方式看到它在文本字符串中的哪個位置達到該寬度。 下面是一篇很棒的博客文章 ，討論如何在更廣泛的意義上實現這一點。