如何使用JavaScript将HTML段落分割成文本行 [英] How to split an HTML paragraph up into its lines of text with JavaScript

问题描述

是否有可能（以及如何）使用JavaScript将文本段落分割到各自的行中。我想要做的是在段落或块引用的每一行上实施挂标点符号，而不仅仅是起始行。

任何其他想法都会受到欢迎！ / p>

澄清我被要求对将一个段落分割成相应的行的含义不那么含糊不清。

在HTML中，< p> 元素创建一个文本块。同样，其他许多元素也是如此。这些文本正文被包装为适合宽度（不管该宽度是由css设置的还是由默认设置假定的）我似乎无法使用正则表达式或任何其他方式检测换行符的位置。所以我们假设一段最后是7行，我希望能够检测到它是7行，这些行开始和结束的位置。

寻找 \\\
或 \r 似乎没有产生任何东西。

解决方案

蛮力的方法是将你的所有单词段落并制作 span s。然后，您可以测量跨度的 offsetTop 属性，以查找哪些以不同的行结束。

下面的代码片段， getLines（）返回一个数组数组，其中每个内部数组是一个行中每个单词的span元素。然后，您可以操纵它，因为您希望使用某些CSS创建悬挂式标点符号，也许可以通过在标点符号中插入绝对定位的跨度。

$ b

//因此，它在animationsetTimeout（function（）{splitLines（）; showLines（）;}，1000）函数后运行showLines（）{var lines = getLines（）; console.log（line.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（''）; }函数getLines（）{var lines = []; var line; var p = document.getElementsByTagName（'p'）[0]; var words = p.getElementsByTagName（'span'）; var lastTop; for（var i = 0; i

< p>这里是我们想跟踪的段落。这是我们想要追踪的段落。以下是我们想要跟踪的段落这里是我们想要跟踪的段落这里是我们想要跟踪的段落的段落这里是我们想跟踪< / p>的段落

这是一个可以调整窗口大小的小提琴，因此段落更改大小

a href =http://jsfiddle.net/4zs71pcd/1/ =nofollow> http://jsfiddle.net/4zs71pcd/1/

Is it possible (and how can I) split a paragraph of text up into its respective lines with JavaScript. What I'd like to do is implement hanging punctuation on every line of a paragraph or blockquote, not just the starting line.

Any other ideas would be welcome too!

Clarification I was asked to be less ambiguous about what "split a paragraph into its respective lines" means.

In HTML a <p> element creates a block of text. Similarly, so do many other elements. These bodies of text get wrapped to fit the width (whether that width is set by the css or assumed by the default setting) I can't seem to detect where the line breaks happen using regex or any other means. So let's say a paragraph ends up being 7 lines long, I'd like to be able to detect that it's seven lines, and where those lines start and end.

Looking for a \n or a \r doesn't seem to yield anything.

解决方案

A brute force way to do it is to split all the words in your paragraph and make spans of them. You can then measure the offsetTop property of your spans to find which ones end up in different lines.

In the snippet below, getLines() returns an array of arrays where each inner array is an contains the span elements for each word in a line. You could then manipulate that as you wish to create your hanging punctuation using some CSS, maybe by inserting absolutely positioned spans with your punctuation.

//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>

Here's a fiddle that you can resize the window so the paragraph changes size http://jsfiddle.net/4zs71pcd/1/

这篇关于如何使用JavaScript将HTML段落分割成文本行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！